如何調用JavaScript的模式沒有按下按鈕

-1

<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()？

來源

2017-05-23 Atma

@ CrisMVP3200這是我的問題，怎麼辦我這樣做？ – Atma

我投票結束這個問題作爲題外話，因爲答案是在bootstrap文檔中 – charlietfl

@charlietfl我是一個bootstrap noob。這就是爲什麼我在未來爲自己和其他人提出這個問題的原因。 SO是新的文檔。 – Atma

您可以將類show和in添加到HTML中，如下所示：

<div class="modal fade show in">

或者，你可以調用 '顯示' 方法以編程

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

參見運行演示下面

$(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>

來源

2017-05-23 22:47:41 ochi

最簡單的方法是將show類添加到您的模式：

<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>

來源

2017-05-23 22:39:34 Dekel

您可以點擊使用Javascript按鈕：

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

但我強烈建議閱讀模式的文檔，必須有一個功能來顯示/隱藏。例如;如果它是一個引導模式，則可以顯示它是這樣的：

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

爲了使頁面加載通話：

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

或者，如果你使用jQuery：

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

來源

2017-05-23 22:40:20 smddzcy

如何調用JavaScript的模式沒有按下按鈕

回答

相關問題