2012-04-01 34 views
3

我想在頁面加載期間打開模式,但不工作。我相信這個錯誤應該在腳本中。錯誤發生在樣式中。誰能幫我?簡單的模式 - 打開onload

這是HTML代碼

<script type="text/javascript"> 
    jQuery(document).ready(function(e){ 
     $("#osx-modal-content, #osx-overlay, #osx-modal-data, #osx-container").modal({ 
     }); 
    }); 
</script> 

其他文件都等於SimpleModal -- Open OnLoad

回答

0

通過運行下面的代碼片段,請參閱工作演示。

1)將加載負載簡單模式彈出(按鍵脫身)

2)您可以使用演示按鈕以及看到樣品的工作。 (按鍵退出)

希望這可以幫助你找出你的問題,否則在小提琴中輕彈你的代碼我會看看。

$(document).ready(function(){ 
 
    $('#basic-modal-content').modal(); 
 
    return false; 
 
});  
 

 
// Load dialog on click 
 
$('#basic-modal .basic').click(function (e) { 
 
    $('#basic-modal-content').modal(); 
 

 
    return false; 
 
}); 
 
    
 
$('#btnSecond, #btnSecond2').click(function (e) { 
 
    $('#basic-modal-content2').modal(); 
 
    return false; 
 
}); 
 

 
/* 
 
* SimpleModal Basic Modal Dialog 
 
* http://www.ericmmartin.com/projects/simplemodal/ 
 
* http://code.google.com/p/simplemodal/ 
 
* 
 
* Copyright (c) 2010 Eric Martin - http://ericmmartin.com 
 
* 
 
* Licensed under the MIT license: 
 
* http://www.opensource.org/licenses/mit-license.php 
 
* 
 
* Revision: $Id: basic.css 257 2010-07-27 23:06:56Z emartin24 $ 
 
*/ 
 

 
#basic-modal-content {display:none;} 
 
#basic-modal-content2 {display:none;} 
 

 
/* Overlay */ 
 
#simplemodal-overlay {background-color:#000; cursor:wait;} 
 

 
/* Container */ 
 
#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;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplemodal/1.4.4/jquery.simplemodal.min.js"></script> 
 
<html> 
 
<head> 
 
    <title> SimpleModal Basic Modal Dialog </title> 
 
    <meta name='author' content='Eric Martin' /> 
 
    <meta name='copyright' content='2010 - Eric Martin' /> 
 
    <!-- JS files are loaded at the bottom of the page --> 
 
</head> 
 
<body> 
 
<div id='container'> 
 
    <div id='logo'> 
 
     <h1>Simple<span>Modal</span></h1> 
 
     <span class='title'>A Modal Dialog Framework Plugin for jQuery</span> 
 
    </div> 
 
    <div id='content'> 
 
     <div id='basic-modal'> 
 
      <h3>Basic Modal Dialog</h3> 
 
      <p>A basic modal dialog with minimal styling and no additional options. There are a few CSS properties set internally by SimpleModal, however, SimpleModal relies mostly on style options and/or external CSS for the look and feel.</p> 
 
      <input type='button' name='basic' value='Demo' class='basic'/> or <a href='#' class='basic'>Demo</a> 
 
     </div> 
 
     
 
     <input type='button' id='btnSecond2' value='Demo Second' class='basic'/> 
 
     
 
     <!-- modal content --> 
 
     <div id="basic-modal-content"> 
 
      <h3>Basic Modal Dialog</h3> 
 
       some content 
 
       <input type='button' id='btnSecond' value='Demo Second' class='basic'/> 
 
     </div> 
 

 
     <div id="basic-modal-content2"> 
 
      <h3>Basic Modal Dialog 2</h3> 
 
       some content 
 
     </div> 
 
     
 
     <!-- preload the images --> 
 
     <div style='display:none'> 
 
      <img src='img/basic/x.png' alt='' /> 
 
     </div> 
 
    </div> 
 
    <div id='footer'> 
 
    </div> 
 
</div> 
 
<!-- Load jQuery, SimpleModal and Basic JS files --> 
 

 
</body> 
 
</html>

+0

但我用這個代碼(樣式) http://stackoverflow.com/questions/2273899/simplemodal-open-onload – prbprado 2012-04-01 21:21:21

+0

否則,你的代碼就可以了。謝謝我會用它。 – prbprado 2012-04-01 21:34:32

+0

Cooleos,:)哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 – 2012-04-01 21:56:54