Запустіть модуль завантаження під час завантаження сторінки

Я взагалі не знаю JavaScript. Документація завантажувальної програми говорить до

Виклик модалу через javascript: $ ('# myModal'). Модальний (параметри)

У мене немає поняття, як це назвати під час завантаження сторінки. Використовуючи наданий код на сторінці завантаження, я можу успішно викликати Модальний елемент на клацанні елемента, але я хочу, щоб він негайно завантажився під час завантаження сторінки.

Просто загорніть модальний вигляд, який ви хочете зателефонувати на завантаження сторінки, всередині loadподії jQuery в розділі заголовка документа, і він повинен спливати, наприклад:

JS

<script type="text/javascript">
    $(window).on('load',function(){
        $('#myModal').modal('show');
    });
</script>

HTML

<div class="modal hide fade" id="myModal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

Ви все ще можете зателефонувати на модалі на своїй сторінці, зателефонувавши за таким посиланням:

<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

Не потрібно javascriptпоказувати модальні

Найпростіший спосіб - замінити "приховати" на "в"

class="modal fade hide"

так

class="modal fade in"

і вам потрібно додати onclick = "$('.modal').hide()"кнопку закриття;

PS: Я думаю, що найкращим способом є додавання сценарію jQuery:

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

Просто додайте наступне-

class="modal show"

Робочий приклад-

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <!-- 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 show" 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>

Ви можете спробувати цей запущений код-

$(window).load(function()
{
    $('#myModal').modal('show');
});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <!-- 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>

Більше можна знайти тут .

Подумайте, у вас є ваша повна відповідь.

щодо того, що говорять про Іллі Андре, вам потрібно додати сценарій js після рядка в тому, що ви називаєте jquery:

<script src="content/bootstrapJS/jquery-2.1.1.min.js" type="text/javascript"></script>

<script type="text/javascript">
     $(window).load(function(){
         $('#myModal').modal('show');
      });
</script>

в моєму випадку це була проблема, сподіваюся, що це допомагає

У моєму випадку додавання jQuery для відображення модалу не спрацювало:

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

Що, здавалося, тому, що модаль мав атрибут aria-hidden = "true":

<div class="modal fade" aria-hidden="true" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

Видалення цього атрибуту було необхідним, а також jQuery, наведеним вище:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

Зауважте, що я спробував змінити модальні класи з modal fadeна modal fade in, і це не вийшло. Крім того, зміна класів з modal fadeна modal showприпиняє модаль від можливості закрити.

Тут є рішення [без ініціалізації JavaScript!]

Я не зміг знайти приклад без ініціалізації вашого модалу з javascript, $('#myModal').modal('show')тому є пропозиція про те, як ви могли його реалізувати без затримки javascript при завантаженні сторінки.

1. Відредагуйте свій модальний контейнер-div з класом та стилем:

<div class="modal in" id="MyModal" tabindex="-1" role="dialog" style="display: block; padding-right: 17px;">

2. Редагуйте своє тіло класом та стилем:

   <body class="modal-open" style="padding-right:17px;">

3. Додати модальний фон div

   <div class="modal-backdrop in"></div>

4. Додати сценарій

   $(document).ready(function() {
       $('body').css('padding-right', '0px');
       $('body').removeClass('modal-open');
       $('.modal-backdrop').remove();
   
       $('#MyModal').modal('show'); });

   Що станеться, що html для вашого модаля буде завантажений на завантаження сторінки без будь-якого JavaScript, (без затримки). На даний момент ви не можете закрити модальний, тому ми маємо скрипт document.ready, щоб правильно завантажити модал, коли все завантажено. Ми фактично видалимо спеціальний код, а потім ініціалізуємо модальний (знову ж таки) з .modal ('показ').

Ви можете активувати модальний режим без написання JavaScript просто за допомогою атрибутів даних.

Опція "show", встановлена ​​на true, показує модал при ініціалізації:

<div class="modal fade" tabindex="-1" role="dialog" data-show="true"></div>

Як уже згадували інші, створіть свій модал з display: block

<div class="modal in" tabindex="-1" role="dialog" style="display:block">
...

Розташуйте фон де-небудь на своїй сторінці, він не обов'язково повинен знаходитися внизу сторінки

<div class="modal-backdrop fade show"></div> 

Потім, щоб мати можливість знову закрити діалогове вікно, додайте це

<script>
    $("button[data-dismiss=modal]").click(function () {
        $(".modal.in").removeClass("in").addClass("fade").hide();
        $(".modal-backdrop").remove();
    });
</script>

Сподіваюсь, це допомагає

Тестовано з Bootstrap 3 та jQuery (2.2 та 2.3)

$(window).on('load',function(){
  $('#myModal').modal('show');
});



<!-- 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"><i class="fa fa-exclamation-circle"></i>&nbsp; //Your modal Title</h4>
        </div>
        <div class="modal-body">
          //Your modal Content
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        </div>
      </div>

    </div>
</div>

https://jsfiddle.net/d7utnsbm/

<div id="ModalStart" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
          <p><i class="icon-spinner icon-spin icon-4x"></i></p>
    </div>
</div>

Ви можете показати це на старті навіть без Javascript. Просто видаліть клас "приховати".

class="Modal"

На додаток до відповідей user2545728 та Reft, без javascript, але зmodal-backdrop in

3 речі додати

1. modal-backdrop inділ з класами перед класом .modal
2. style="display:block;" до класу .modal
3. fade in разом із класом .modal

Приклад

<div class="modal-backdrop in"></div>

<div class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="channelModal" style="display:block;">

    <div class="modal-dialog modal-lg" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h4 class="modal-title" id="channelModal">Welcome!</h4>

            </div>

            <div class="modal-body" style="height:350px;">

                How did you find us?

            </div>

        </div>

    </div>

</div>

Оновлення 2020 - Bootstrap 4

Модальна розмітка трохи змінилася для Bootstrap 4. Ось як ви можете відкрити модал при завантаженні сторінки і, можливо, затримати показ модального ...

$(window).on('load',function(){
    var delayMs = 1500; // delay in milliseconds

    setTimeout(function(){
        $('#myModal').modal('show');
    }, delayMs);
});    

<div class="modal fade" id="myModal">
      <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">My Modal</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary mx-auto" data-dismiss="modal">Close</button>
                </div>
            </div>
      </div>
</div>

Демонстрація на Codeply

У завантажувальному інструменті 3 просто потрібно ініціалізувати модальний модуль через js, і якщо в момент завантаження сторінки модальна розмітка знаходиться на сторінці, модальний режим з’явиться.

Якщо ви хочете цього не допустити, скористайтеся опцією, show: falseде ви ініціалізуєте модал. Щось на зразок цього: $('.modal').modal({ show: false })

Можливо, ви хочете jquery.jsвідкладати для швидшого завантаження сторінки. Однак, якщо jquery.jsвідкладено, $(window).loadможливо, це не спрацює. Тоді ви можете спробувати

setTimeout(function(){$('#myModal').modal('show');},3000);

вона з'явиться у вашому модальному режимі після повного завантаження сторінки (включаючи jquery)

Щоб уникнути відміни завантажувальної програми та втратити її функціональність, просто створіть звичайну кнопку запуску, надайте їй ідентифікатор та "натисніть на неї", використовуючи jquery, наприклад: Кнопка запуску:

<button type="button" id="btnAnouncement" class="btn btn-primary" data-toggle="modal" data-target="#modalAnouncement">
  See what´s new!
</button>

Тригер jQuery:

$(document).ready(function () {
  $('#btnAnouncement').click();
)}

Сподіваюся, це допомагає. Ура!

Простий приклад Створіть навантажувач із монтажу завантажувача

<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>
  $(document).ready(function(){
  $('#myModal').modal('show'); 
  setTimeout(function(){
  $('#myModal').modal('hide'); 
  }, 5000);
   });
  </script>
  <style>
.loader {
  border: 13px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 100px;
  height: 100px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.modal-dialog{
width: 150px;
    margin: 10% auto;
}
.modal-content{
background-color: transparent; 
   border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
}
</style>
</head>
<body>

<div class="container">

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

      <!-- Modal content-->
      <div class="modal-content">

        <div class="modal-body">
         <div class="loader"></div>
        </div>

      </div>

    </div>
  </div>

</div>

</body>
</html>