La ventana emergente modal se desvanece al hacer clic y se desvanece al cerrar

Tengo una pregunta bastante simple por una vez. Tengo botones de eliminación que abren ventanas emergentes modales para confirmar o rechazar la eliminación. Me gustaría que estas ventanas emergentes modales se desvanezcan al hacer clic y desaparezcan al cancelar. He intentado algunas cosas diferentes ya, no hay suerte hasta ahora. Solo necesito una solución simple. Gracias por adelantado. Aquí está mi código

<style>
div.delModal
{   
    position:absolute;
    border:solid 1px black;
    padding:8px;
    background-color:white;
    width:160px;
    text-align:right
}
</style>
<script>
function showModal(id) {
        document.getElementById(id).style.display = 'block';
        //$(this).fadeIn('slow');
    }
    function hideModal(id) {
        document.getElementById(id).style.display = 'none';
    }

</script>
</head>

<body>
<input type ="button" value="delete" onclick="showModal('delAll1')">

<div class="delModal" style="display:none" id="delAll1">
  <img src="images/warning.png" />&nbsp;Are you sure you want to delete vessel and the corresponding tanks?<br />
    <input type="button" value="Cancel" class="hide" onclick="hideModal('delAll1')"/>     
    <input type="button" value="Delete" onclick="delVesselAll(1)" id="delete"/>
</div>
</body>

Respuestas a la pregunta(4)

Su respuesta a la pregunta