Modal Pop Up Fade In On Open Click And Fade Out On Close

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 o

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.

See it here.

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:

http://jsfiddle.net/dkmkX/

$(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 pagevar 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.

Solution 3:

Use fadeIn() on the right selector('#'+id), this in the current context would be the global object.

function showModal(id) {   
    $('#'+id).fadeIn();
    //$(this).fadeIn('slow');
}
function hideModal(id) {
    $('#'+id).fadeOut();
}

DEMO

Solution 4:

Why do not use id for each button like this

<input type ="button" value="show"id="show">

<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"id="delete"/>     
    <input type="button" value="Delete" onclick="delVesselAll(1)"id="delete"/>
</div>

And the jquery like this

$("#show").click(function() {
        $("#delAll1").fadeIn();
    });
$("#delete").click(function() {
        $("#delAll1").fadeOut();
    });