jQuery SimpleModal: two different modal contents in the same page

问题

I'm using Eric Martin's SimpleModal, and I need to have two links in index.html pointing to two different modal windows.

I've tried the code below, and it works but the contents of the second modal shows in index.html :(

How can I fix it?

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.

Thanks a lot

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

回答1:

you are not hiding basic-modal-content2 to begin with

add #basic-modal-content2 {display:none;} at the top to start with.

来源：https://stackoverflow.com/questions/5418757/jquery-simplemodal-two-different-modal-contents-in-the-same-page

标签

jquery

html

simplemodal