Разрешить фоновые действия при загрузке модального загрузчика при загрузке страницы - PullRequest
Новая
       15

Разрешить фоновые действия при загрузке модального загрузчика при загрузке страницы

0 голосов
/ 05 июля 2018

Я хочу, чтобы модальный загрузчик появлялся в нижнем левом углу страницы при загрузке страницы и позволял ему исчезать только при нажатии кнопки x, а не при нажатии в любом месте экрана. У меня это работает до сих пор, но следующая проблема заключается в том, что при загрузке модального загрузчика он предотвращает любую фоновую активность, такую ​​как прокрутка страницы или нажатие на ссылку, или что-либо подобное, и добавляет фоновый оттенок с непрозрачностью перед экраном. Как я могу заставить тень исчезнуть и разрешить доступ к веб-сайту, пока модал загружен и отображается в левом нижнем углу?

Вот мои коды. 

<script>
$(document).ready(function() {
  $(window).on('load',function(){
      $('#myModal').modal('show');
  });
  $('#myModal').modal({
    backdrop: 'static',
    keyboard: false
  });
});
</script>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <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>

1 Ответ

0 голосов
/ 05 июля 2018

Похоже, что вы не после модального диалога, а что-то похожее на.

Вы по-прежнему можете визуализировать модальный режим, но не вызывайте .modal, а затем просто обрабатывайте события закрытия самостоятельно.

например. 

$(document).ready(function() {
  $(window).on('load',function(){
    var m = $('#myModal');
    m.show();
    m.find("button").on("click", 
      function () { m.hide(); });
  });
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="myModal" class="modal show" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal Header</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </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>
...