Modal pop up fade in on open click and fade out on close

Question

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 fad

Answer 1

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 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.

Answer 2

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.

Answer 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

Answer 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();
    });