Запуск Bootstrap Modal при загрузке страницы [javascript]


Answers

Вам не нужен javascript для показа модального

Самый простой способ - заменить «hide» на «in»

class="modal fade hide"

так

class="modal fade in"

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

PS: Я думаю, что лучший способ - добавить скрипт jQuery:

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

Я вообще не знаю javascript. Документация для начальной загрузки

Вызов модального через javascript: $ ('# myModal'). Modal (options)

Я не знаю, как назвать это при загрузке страницы. Используя предоставленный код на странице начальной загрузки, я могу успешно вызвать Modal при щелчке элемента, но я хочу, чтобы он сразу загружался при загрузке страницы.




Вы можете попробовать этот runnable code-

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

Подробнее можно найти здесь .

Подумайте, у вас есть полный ответ.




В моем случае добавление 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 остановило модальность от возможности быть закрытым.




В дополнение к user2545728 и Reft ответы, без javascript, но с modal-backdrop in

3 вещи для добавления

  1. div с классами 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>



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



Возможно, вы захотите оставить jquery.js отложенным для более быстрой загрузки страницы. Однако, если jquery.js отложено, то $(window).load может не работать. Тогда вы можете попробовать

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

он будет всплывать ваш модальный после полной загрузки страницы (включая jquery)