Question

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

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

Answer 1

使用.fadeIn()参数（.fadeOut()）上的id和"delAll1"而不是this。

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

使用$("#" + id)，您可以按id选择一个元素，即"#" + id。

See it here.

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

Answer 2

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

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

DEMO

Answer 3

为什么不像这样使用每个按钮的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();
    });

模态弹出在打开单击时淡入，在关闭时淡出

3 个答案: