jQuery SimpleModal: two different modal contents in the same page_问答_开发者

jQuery SimpleModal: two different modal contents in the same page

开发者 https://www.devze.com 2023-02-19 16:34 出处：网络

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

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:n开发者_如何学Cone'>
            <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>

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

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