Question

我正在使用Eric Martin的SimpleModal，我需要在index.html中有两个指向两个不同模态窗口的链接。

我已经尝试了下面的代码，它可以工作，但第二个模态的内容显示在index.html中:(

我该如何解决？

请注意，我正在使用Eric的链接在此处显示代码并使其独立。在我的页面中，我已经下载了文件，并在本地使用它们。

非常感谢

<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>

Answer 1

你没有隐藏以

开头的basic-modal-content2

在顶部添加#basic-modal-content2 {display：none;}以开始。

jQuery SimpleModal：同一页面中的两个不同的模态内容

1 个答案: