模态弹出在打开点击时淡入，在关闭时淡出 [英] 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" /> 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>
推荐答案
在你的 id.fadeIn() 和 .fadeOut()> 参数 ("delAll1") 不在 this 上.
Use .fadeIn() and .fadeOut() on your id parameter ("delAll1") not on this.
function showModal(id) {
$("#" + id).fadeIn('slow');
}
function hideModal(id) {
$("#" + id).fadeOut('slow');
}
$("#" + id) 可以通过id选择元素，即"#" + id.
By using, $("#" + id) you can select an element by its id, that's "#" + id.
注意:将左侧边栏framework下的onLoad改为no wrap (head)，修复范围问题.
Note: Change from onLoad to no wrap (head) under framework on the left sidebar to fix the scope issue.
这篇关于模态弹出在打开点击时淡入，在关闭时淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
