jQuery SimpleModal：兩個不同的模態內容在同一頁

我使用的是Eric Martin的SimpleModal，我需要在index.html中有兩個指向兩個不同模態窗口的鏈接。jQuery SimpleModal：兩個不同的模態內容在同一頁

我嘗試下面的代碼，它的工作原理，但第二個模式中的內容顯示的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>

來源

2011-03-24 user523129

你是不是隱藏基本-modal- content2開頭

add＃basic-modal-content2 {display：none;}頂部開始。

來源

2011-03-24 12:07:30

jQuery SimpleModal：兩個不同的模態內容在同一頁

回答

相關問題