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 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" />&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>

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

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

回答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

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

来源：https://stackoverflow.com/questions/14447444/modal-pop-up-fade-in-on-open-click-and-fade-out-on-close

标签

javascript

jquery

css

onclick

fade