Модальное всплывающее окно исчезает при открытом нажатии и исчезает при закрытии
У меня довольно простой вопрос на этот раз. У меня есть кнопки удаления, которые открывают модальные всплывающие окна для подтверждения или отклонения удаления. Я хотел бы, чтобы эти модальные всплывающие окна появлялись при нажатии и исчезали при отмене. Я уже пробовал несколько разных вещей, пока не повезло. Мне просто нужно простое решение. Заранее спасибо. Вот мой код
<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" /> 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>