我是一个jQuery的新手，都操纵简单的模态，让我在我的脚本这样做是为了有一个页面上有多个模式：
$('input.basic, a.basic').click(function (e) { e.preventDefault(); $(this).next('.basicModalContent').modal(); });
这里是我的HTML：
<a class="basic linkHeading" href="#">Link Heading</a>
<div class="basicModalContent" style="display: none;">
<h1>This Resource Requires Login</h1>
<a href="#" class="simplemodal-close" title="Close">Cancel</a></p>
</div><!--basicModal-->
我遇到的问题是一切工作正常首先点击并关闭。 第二点击启动模式，但所有的内容是从盒子里不见了。
看到此链接为行动的bug： http://blanksky.com/test/ebenefits21/modal.html
我建议是这样的：
链接：
<a href="#" class="basic" id="link-1">link1</a>
<a href="#" class="basic" id="link-2">link2</a>
<a href="#" class="basic" id="link-3">link3</a>
隐藏的内容（通过CSS或内联样式）
<div id="link-1-content" style="display:none">
<p>content</p>
</div>
<div id="link-2-content" style="display:none">
<p>content</p>
</div>
<div id="link-3-content" style="display:none">
<p>content</p>
</div>
JavaScript的：
$(document).ready(function () {
$('#basic-modal input.basic, #basic-modal a.basic').click(function (e) {
e.preventDefault();
var content = '#' + this.id + '-content';
$(content).modal();
});
});
类似的东西应该做的伎俩。
当你隐藏对话框，jQuery的改变DOM中div的位置，然后用希望“找到它$(this).next(...) ”，你不能这样做。 你应该有一些ID或参考其他方式来定位。
编辑：那么，你有我的思维一点回音。 我希望这是有用的，我要通过代码。 我没有测试：
$('input.basic, a.basic').click(function (e)
{
e.preventDefault();
var el = "";
if($(this).data("xid")!=undefined)
{
el = $($(this).data("xid"));
}
else
{
var xid = "xid_" + ((new Date()).getTime());
el = $(this).next('.basicModalContent');
$(this).data("xid", xid);
if (el.lenght>0)
el.attr("id", xid);
}
if (el.lenght>0)
{
el.modal();
}
});
需要较少的标记一种解决方案是使用一个单一的模态“窗口”。 请看下面的例子：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Simple Modal Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="simplemodal.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$('.loginRequired').bind('click',
function() {
$('#clickedLink').html(this.id);
$('#modalWindow').modal();
return false;
}
);
}
);
</script>
<style>
#simplemodal-container { display: none; }
#simplemodal-overlay { background: #000; opacity: 0.4; }
#modalWindow {
background: #FFF;
border: 1px solid black;
height: 100px;
opacity: 1.0;
padding: 10px;
position: relative;
width: 220px;
z-index: 1010;
}
</style>
</head>
<body>
<p><a href="http://example.com/" id="link1" class="loginRequired">Login Required Link</a></p>
<p><a href="http://example.com/" id="link2" class="loginRequired">Login Required Link</a></p>
<p><a href="http://example.com/" id="link3" class="loginRequired">Login Required Link</a></p>
<p><a href="http://example.com/">http://example.com/</a></p>
<div id="simplemodal-container">
<div id="modalWindow">
<p>Sorry, you must login to click <b id="clickedLink">unknown</b>.</p>
<p><a href="#" class="simplemodal-close">Cancel</a></p>
</div>
</div>
</body>
</html>
