ボタンを押すことなく、javascriptのモーダル呼び出し方法

Question

私は、次のボタンがあります。このモーダル呼び出します

<button data-toggle="tk-modal-demo" data-modal-options="slide-left" data-dialog-options="sidebar sidebar-size-3 sidebar-size-xs-1 sidebar-offset-0 left" class="btn btn-primary">Slide left</button> 

：私はモーダルポップアップするにはどうすればよい

<script id="tk-modal-demo" type="text/x-handlebars-template"> 
       <div class="modal fade"> 
       <div class="modal-dialog"> 
        <div class="v-cell"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
         <h4 class="modal-title">Modal title</h4> 
         </div> 
         <div class="modal-body"> 
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam atque consequuntur dolore fugiat fugit hic in ipsam iure magnam maxime quaerat, quam qui repellat repellendus temporibus vel vitae voluptate! 
         </div> 
         <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button> 
         </div> 
        </div> 
        </div> 
       </div> 
       </div> 
      </script> 

をページのロード時に代わりにするときのボタンが押されましたか？言い換えれば、私はどのJavaScriptを呼びますか？

何かのようにtk-modal-demo()？

Answer 1

ページのロードに電話をかけるには

$('#tk-modal-demo').modal('show'); 

---

：それはブートストラップモーダルだ場合、あなたはこのようにそれを表示することができます

showとinのクラスをHTMLに追加することができます。

<div class="modal fade show in"> 

それとも、プログラム

$(".modal").modal("show"); 

どのように行う、私の質問ですCrisMVP3200 @

$(function() { 
 
    /* Or you can invoke the 'show' method programmatically */ 
 
    //$(".modal").modal("show"); 
 
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 

 
<div>content</div> 
 

 
<!-- Either add the classes 'show' and 'in' to the HTML --> 
 
<div class="modal fade show in"> 
 
    <div class="modal-dialog"> 
 
    <div class="v-cell"> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
 
      <h4 class="modal-title">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam atque consequuntur dolore fugiat fugit hic in ipsam iure magnam maxime quaerat, quam qui repellat repellendus temporibus vel vitae voluptate! 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

最も簡単なオプションは、あなたのモーダルにshowクラスを追加することです：、

document.querySelector('button[data-toggle="tk-modal-demo"]').click() 

しかし、私は非常にモーダルのドキュメントを読んでお勧め：あなたはJavascriptを使用して、ボタンをクリックすることができます

<script id="tk-modal-demo" type="text/x-handlebars-template"> 
    <div class="modal show fade"> 
     <div class="modal-dialog"> 
      <div class="v-cell"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"> 
       <span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
       <h4 class="modal-title">Modal title</h4> 
       </div> 
       <div class="modal-body"> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam atque consequuntur dolore fugiat fugit hic in ipsam iure magnam maxime quaerat, quam qui repellat repellendus temporibus vel vitae voluptate! 
       </div> 
       <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
</script> 

Answer 3

表示/非表示の機能が必要です。例えば;

window.addEventListener('load', function() { 
    // CODE GOES HERE 
}); 

それとも、jQueryのを使用する場合：

$(window).on('load',function() { 
    // CODE GOES HERE 
});