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



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 при щелчке элемента, но я хочу, чтобы он сразу загружался при загрузке страницы.




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



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

Параметр «show», установленный в true, показывает модальный при инициализации:

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



Вы можете попробовать этот 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>

Подробнее можно найти here .

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




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

Надеюсь это поможет




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

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

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




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




Links