Как сделать модальным видимым по умолчанию при запуске 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.So, что содержание на главной странице скрыто за модальным также показано одновременно любое предложение? – 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-страницы

ответ

Смежные вопросы