Modal pop up fade in on open click and fade out on close
Solution 1
Use .fadeIn()
and .fadeOut()
on your id
parameter ("delAll1"
) not on this
.
function showModal(id) {
$("#" + id).fadeIn('slow');
}
function hideModal(id) {
$("#" + id).fadeOut('slow');
}
By using, $("#" + id)
you can select an element by its id
, that's "#" + id
.
Note: Change from onLoad
to no wrap (head)
under framework on the left sidebar to fix the scope issue.
Solution 2
I wasn't satisfied with your first two comments so I made a new fiddle:
$(document).ready(function () {
$('.deleteButton').each(function (i) {
var whichModal = i; //use this index, a data attribute on the modal, or $(this).parent().parent() to find delete the actual item from the page
var deleteModal = $(this).parent().find('.deleteModal');
$(this).click(function (e) {
deleteModal.fadeIn('slow');
});
$(this).parent().find('.modalDelete').click(function (e) {
deleteModal.fadeOut('slow');
});
$(this).parent().find('.modalCancel').click(function (e) {
deleteModal.fadeOut('slow');
});
});
}); //ready
This will let you add multiple delete buttons each with their own modals.
There's a comment in the JS about how to find out which modal has been pressed, since this solution is ID independent.
![triplethreat77](https://i.stack.imgur.com/RfXMV.jpg?s=256&g=1)
triplethreat77
Updated on July 09, 2022Comments
-
triplethreat77 almost 2 years
I have a rather simple question for once. I have delete buttons that open modal pop ups to confirm or deny deletion. I would like these modal pop ups to fade in on click and fade out on cancel. I've tried a few different things already, no luck so far. I just need a simple solution. Thanks in advance. Here's my code
<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>