単純なモーダルオープンオンロード

私はページロード時にモーダルを開こうとしていますが、動作していません。私はエラーがスクリプトにあるはずだと信じています。スタイルでエラーが発生しています。誰でも助けてくれますか？単純なモーダルオープンオンロード

これは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

出典

2012-04-01 prbprado

に等しいです。

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>

出典

2012-04-01 21:16:45

しかし、私はそうしないと、あなたのコードは大丈夫です、このコード（スタイル） http://stackoverflow.com/questions/2273899/simplemodal-open-onload – prbprado

を使用しています。ありがとう、私はそれを使用します。 – prbprado

Cooleos、:)笑 - あなたが簡単なことをしたいのであれば混乱してしまいます。そして、上記のコードは、お手伝いが必要な場合は、私にpingをしてもらえますか？ –

単純なモーダルオープンオンロード

答えて

関連する問題