Javascript 模态弹出在打开时淡入并在关闭时淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14447444/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Modal pop up fade in on open click and fade out on close
提问by triplethreat77
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>
回答by Alexander
Use .fadeIn()and .fadeOut()on your idparameter ("delAll1") not on this.
在您的参数 ( ) 上使用.fadeIn()and 而不是 on 。.fadeOut()id"delAll1"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.
通过使用，$("#" + id)您可以通过它的 选择一个元素id，即"#" + id。
Note:Change from onLoadto no wrap (head)under framework on the left sidebar to fix the scope issue.
注意：从左侧边栏上的框架更改onLoad为no wrap (head)下框架以修复范围问题。
回答by mattdlockyer
I wasn't satisfied with your first two comments so I made a new fiddle:
我对你的前两条评论不满意，所以我做了一个新的小提琴：
$(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.
JS 中有一条关于如何找出按下了哪个模态的注释，因为此解决方案与 ID 无关。
回答by Musa
回答by kilkadg
Why do not use id for each button like this
为什么不像这样为每个按钮使用 id
<input type ="button" value="show" id="show">
<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" id="delete"/>
<input type="button" value="Delete" onclick="delVesselAll(1)" id="delete"/>
</div>
And the jquery like this
和这样的 jquery
$("#show").click(function() {
$("#delAll1").fadeIn();
});
$("#delete").click(function() {
$("#delAll1").fadeOut();
});
