jQuery SimpleModal:同一页面中的两个不同的模态内容 [英] jQuery SimpleModal: two different modal contents in the same page
问题描述
我正在使用Eric Martin的SimpleModal，我需要在index.html中有两个指向两个不同模态窗口的链接.
I'm using Eric Martin's SimpleModal, and I need to have two links in index.html pointing to two different modal windows.
我已经尝试了下面的代码，并且可以工作，但是第二个模式的内容显示在index.html中:(
I've tried the code below, and it works but the contents of the second modal shows in index.html :(
我该如何解决?
请注意，我正在使用Eric的链接在此处显示代码并使其独立.在我的页面中，我已经下载了文件，并在本地使用它们.
Please note that I'm using Eric's links to show the code here and make it stand alone. In my page I've downloaded the files and I use them locally.
非常感谢
<html>
<head>
<style>
#basic-modal-content {display:none;}
#simplemodal-overlay {background-color:#000; cursor:wait;}
#simplemodal-container {height:360px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
#simplemodal-container .simplemodal-data {padding:8px;}
#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
#simplemodal-container a {color:#ddd;}
#simplemodal-container a.modalCloseImg {background:url(http://www.ericmmartin.com/wordpress/wp-content/themes/emm-v3/demos/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container h3 {color:#84b8d9;}
</style>
</head>
<body>
<div id='container'>
<div id='content'>
<div id='basic-modal'>
<div>
<a href="" class="basic">Need to see content 1</a><br>
<a href="" class="basic2">Need to see content 2</a><br><br><br><br>
</div>
</div>
<!-- modal content -->
<div id="basic-modal-content">
Content 1<br><br>
Content 1 body text <br>
</div>
<!-- modal content2 -->
<div id="basic-modal-content2">
Content 2<br><br>
Content 2 body text <br>
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='http://www.ericmmartin.com/wordpress/wp-content/themes/emm-v3/demos/x.png' alt='' />
</div>
</div>
</div>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>
<script type='text/javascript' src='http://www.ericmmartin.com/wordpress/wp-content/plugins/simplemodal-login/js/jquery.simplemodal.js'></script>
<script type="text/javascript">
jQuery(function ($) {
$('#basic-modal .basic').click(function (e) {
$('#basic-modal-content').modal();
return false;
});
$('#basic-modal .basic2').click(function (e) {
$('#basic-modal-content2').modal();
return false;
});
});
</script>
</body>
</html>
推荐答案
您并没有隐藏basic-modal-content2以
you are not hiding basic-modal-content2 to begin with
首先在顶部添加#basic-modal-content2 {display:none;}.
add #basic-modal-content2 {display:none;} at the top to start with.
这篇关于jQuery SimpleModal:同一页面中的两个不同的模态内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
