Почему Bootstrap модальное шоу не вызывает код JavaScript - PullRequest
Новая
       0

Почему Bootstrap модальное шоу не вызывает код JavaScript

0 голосов
/ 08 сентября 2018

Я создал страницу html с кодом bootstrap modal (скопировано с веб-сайта Bootstrap. Я заметил, что modal не отображается, пока я не позвоню modal('show'). Почему? Разве браузер не должен интерпретировать HTML и отображать поле modal? Следующий код не показывает modal, но если вы прокомментируете script в конце, он покажет modal

<!DOCTYPE html>
<html lang="en">
<head>
  <base href=""> 
  <title>Example</title>
  <!--meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"-->
  <link rel="stylesheet" media="screen" href="fiddle.css">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="fiddle.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
  </head>
<body>  
  Did you see the dialog box?
  <div class="modal" tabindex="-1" role="dialog" id="mydialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<¬- UNCOMMENT THIS AND THE MODAL WILL SHOW-->
<!--script>
$('#mydialog').modal('show');    
  </script-->

</body>

Ответы [ 5 ]

0 голосов
/ 08 сентября 2018

Модал Bootstrap предназначен для запуска модального окна при click элементе (то есть кнопке или ссылке) со следующими атрибутами:
data-toggle = "modal" открывает модальное окно
data-target = "# myModal" указывает на идентификатор модального

В вашем коде не происходит событие щелчка, и, таким образом, модальное не было открыто по умолчанию

Похоже, что вы хотите открыть модал, когда загрузка страницы, так как модал не предназначен для открытия при загрузке страницы, вы должны вручную запустить метод show метода

.
0 голосов
/ 08 сентября 2018

Это потому, что для модального div с классом modal свойство отображения по умолчанию установлено на none.

Прокомментируйте скрипт и проверьте модальный режим в вашем браузере, вы заметите, что он имеет display из none.

Когда вы вызываете .modal() и передаете параметр show в свой модальный идентификатор *1013*, тогда для свойства display устанавливается значение block, то есть когда вы можете его увидеть .

Это потому, что модалы не должны показываться по умолчанию, а вместо этого для пользовательского события, поэтому вы можете вызвать .modal('show) `для этого события. 

$('#mydialog').modal('show'); 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<body>  
  Did you see the dialog box?
  <div class="modal" tabindex="-1" role="dialog" id="mydialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
0 голосов
/ 08 сентября 2018

, так как модальное работает, если вы нажали на кнопку, чтобы переключить отображение этот пример работает отлично см. эту ссылку https://getbootstrap.com/docs/4.0/components/modal/#live-demo

0 голосов
/ 08 сентября 2018

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Modal Example</h2>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>
0 голосов
/ 08 сентября 2018

Я думаю, это произошло потому, что в head tag вы присоединяетесь к jquery и bootstrap librrary, так что вам больше не нужен код, потому что bootstrap сделает это за вас ..

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...