どのようにポップアップモデルを自動的に表示するか

ボタンをクリックせずにポップアップが自動的に実行されるようにしたいモーダルを表示すると、$(".modal_main").show();を$(".modal_main").false();に変更しようとしましたが、同じ問題に直面しています。ページが開いているときに、自動にモーダルを表示したい場合はどのようにポップアップモデルを自動的に表示するか

<script> 
$(document).ready(function(){ 
    $(".call_modal").click(function(){ 
    $(".modal").fadeIn(); 
    $(".modal_main").show(); 
     }); 
}); 
$(document).ready(function(){ 
    $(".close").click(function(){ 
    $(".modal").fadeOut(); 
    $(".modal_main").fadeOut(); 
     }); 
}); 
</script> 
</head> 
<body> 
<button class="call_modal" style="cursor:pointer;">Show Modal</button> 

</body> 
</html>

出典

2017-10-02 J. Paul

... – litelite

ので、私はそれをどのように修復することができますか？ –

clickイベントの外に持って行ってください...あなたが知っている '$（"。call_modal "）は、ページロード時に – litelite

あなたは.clickの文からそれを引く必要があります。

さらに、2つの.readyステートメントを作成しないでください。あなたがそのようにこれを行うことができます

：

$(document).ready(function(){ 

    $(".modal_main").show(); 

    $(".call_modal").click(function(){ 
    $(".modal").fadeIn(); 
    $(".modal_main").show(); 
    }); 

    $(".close").click(function(){ 
    $(".modal").fadeOut(); 
    $(".modal_main").fadeOut(); 
    }); 
});

出典

2017-10-02 20:06:20 Stwosch

まず、あなたはdocument.readyの2つのコピーを使用しないでください。ロードページとクリックイベントがアタッチされた後、例のようにクリックイベントを発生させるかdivを直接表示する必要があります。

$(document).ready(function(){ 
 
    $(".call_modal").click(function(){ 
 
    
 
    $(".modal").fadeIn(); 
 
    $(".modal_main").show(); 
 
     }); 
 
     
 
     $(".close").click(function(){ 
 
    $(".modal").fadeOut(); 
 
    $(".modal_main").fadeOut(); 
 
     }); 
 
     
 
     //$(".call_modal").click(); Do not use this in production code! 
 
     $(".modal_main").show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="modal" style="display:none">modal visible</div> 
 
<div class="modal_main" style="display:none">main modal visible</div> 
 

 
<button class="call_modal" style="cursor:pointer;">Show Modal</button>

あなたのモデルを示すためにあなたのコードは、クリックイベント内で

出典

2017-10-02 20:07:10

どのようにポップアップモデルを自動的に表示するか

答えて

関連する問題