如何讓html頁面運行時默認顯示模態

我正在創建彈出div（模態），默認情況下它會出現在屏幕上。不過，我成功地通過點擊按鈕打開它，但是我希望在運行HTML頁面時默認打開它。這是我的代碼。如何讓html頁面運行時默認顯示模態

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Bootstrap Example</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    </head> 
    <body> 

     <div class="container"> 
      <h2>Modal Example</h2> 
      <!-- Trigger the modal with a button --> 
      <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

      <!-- Modal --> 
      <div class="modal fade" id="myModal" role="dialog"> 
       <div class="modal-dialog"> 

        <!-- Modal content--> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal">&times;</button> 
          <h4 class="modal-title">Modal Header</h4> 
         </div> 
         <div class="modal-body"> 
          <p>Some text in the modal.</p> 
         </div> 
         <div class="modal-footer"> 
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         </div> 
        </div> 

       </div> 
      </div> 
     </div> 
    </body> 
</html>

我在哪裏展示使用，我使用的數據目標屬性調用模式一button.In模態。那麼如何做到這一點沒有任何點擊事件？

來源

2015-09-18 Dhiraj

使用.modal('show')顯示模式手動

$(document).ready(function() { 
 
    $('#myModal').modal('show'); 
 
});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <h2>Modal Example</h2> 
 
    <!-- Trigger the modal with a button --> 
 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 

 
</div>

來源

2015-09-18 09:10:28

它現在正在工作。 – Dhiraj

@Dhiraj：很高興能幫到 –

@Pravan現在我想將模態顯示爲transperent。所以隱藏在模態後面的主頁上的內容也同時顯示了任何建議？ – Dhiraj

添加in類<div class="modal fade" id="myModal" role="dialog">，這樣

<div class="modal fade in" id="myModal" role="dialog">

，或者您可以撥打下面的函數時，頁面加載

$('#myModal').modal('show');

來源

2015-09-18 09:11:25

開放模式在document.ready()

爲如。

$(document).ready(function(){ 

    //open modal here 
     $('#myModal').show(); 
     });

來源

2015-09-18 09:14:52 sunil

如何讓html頁面運行時默認顯示模態

回答

相關問題