4

有一次我有一个相当简单的问题。我有删除按钮，可打开模式弹出窗口以确认或拒绝删除。我希望这些模式弹出窗口在点击时淡入并在取消时淡出。我已经尝试了一些不同的东西，到目前为止还没有运气。我只需要一个简单的解决方案。提前致谢。这是我的代码

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

4 回答 4

5

在您的参数 ( ) 上使用.fadeIn()and 而不是 on 。.fadeOut()id"delAll1"this

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

通过使用，$("#" + id)您可以通过它选择一个元素id，即"#" + id.

看这里。

注意：从左侧边栏的框架下更改onLoad为修复范围问题。no wrap (head)

于 2013-01-21T21:27:22.633 回答
2

我对你的前两条评论不满意，所以我做了一个新的小提琴：

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

这将允许您添加多个删除按钮，每个按钮都有自己的模式。

JS 中有一条关于如何找出已按下哪个模式的评论，因为此解决方案与 ID 无关。

于 2013-01-21T21:44:33.103 回答
0

为什么不像这样对每个按钮使用 id

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

而像这样的jquery

$("#show").click(function() {
        $("#delAll1").fadeIn();
    });
$("#delete").click(function() {
        $("#delAll1").fadeOut();
    });
于 2013-01-21T21:34:56.067 回答
0

fadeIn()在右选择器（'#'+id）上使用，this在当前上下文中将是全局对象。

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

演示

于 2013-01-21T21:29:54.203 回答