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

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>

标签： javascript jquery css onclick fade

4条回答

做个烂人

2楼-- · 2019-03-05 20:25

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

0人赞添加讨论(0) 举报

三岁会撩人

3楼-- · 2019-03-05 20:34

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

0人赞添加讨论(0) 举报

狗以群分

4楼-- · 2019-03-05 20:41

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.

0人赞添加讨论(0) 举报

该账号已被封号

5楼-- · 2019-03-05 20:43

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.

0人赞添加讨论(0) 举报

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

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间