模态弹出在单击时淡入并在关闭时淡出
[英]Modal pop up fade in on open click and fade out on close
问题描述
我有一个很简单的问题。 我有删除按钮，可打开模式弹出窗口以确认或拒绝删除。 我希望这些模式弹出窗口在单击时淡入并在取消时淡出。 我已经尝试了几种不同的方法，到目前为止还没有运气。 我只需要一个简单的解决方案。 提前致谢。 这是我的代码
<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>
4 个解决方案
解决方案1
3 已采纳 2013-01-21 21:27:22
使用.fadeIn()和.fadeOut()在你的id参数（ "delAll1"不是this 。
function showModal(id) {
$("#" + id).fadeIn('slow');
}
function hideModal(id) {
$("#" + id).fadeOut('slow');
}
通过使用$("#" + id)您可以通过其id选择一个元素，即"#" + id 。
注意：从左侧栏上的框架下的onLoad更改为no wrap (head)以解决范围问题。
解决方案2
2 2013-01-21 21:44:33
我对您的前两个评论不满意，所以我做了一个新的小提琴：
$(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
这样，您就可以添加多个删除按钮，每个按钮都有自己的模式。
由于此解决方案与ID无关，因此JS中有一条评论，说明如何找出已按下的模态。
解决方案3
0 2013-01-21 21:29:54
在右选择器（ '#'+id fadeIn()上使用fadeIn() ，在当前上下文中， this将是全局对象。
function showModal(id) {
$('#'+id).fadeIn();
//$(this).fadeIn('slow');
}
function hideModal(id) {
$('#'+id).fadeOut();
}
解决方案4
0 2013-01-21 21:34:56
为什么不为每个按钮这样使用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>
和这样的jQuery
$("#show").click(function() {
$("#delAll1").fadeIn();
});
$("#delete").click(function() {
$("#delAll1").fadeOut();
});
淡入/淡出不适用于弹出窗口
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.