Как открыть модальное диалоговое окно Bootstrap 4, используя jQuery

Question

Как открыть модальное диалоговое окно Bootstrap 4 с помощью jQuery?

Я могу открыть модал с помощью кнопки, подобной следующей, которая открывает диалоговое окно со следующим div:

<input type="button" 
       name="PurchaseOrderButton" 
       value="Find" 
       class="btn btn-primary" 
       data-toggle="modal"
       data-target="#id-FindModal" 
       id="id-FindBtn" 
       />

<div class="modal" id="id-FindModal">

Мне нужно запустить функцию JavaScript, которая будет выполнять несколько шагов, затем загрузите модальный. Я попытался сделать это со следующим утверждением, но оно не работает:

$('#id-FindModal').modal('show');

Answer 1

Ваш призыв показать модальность в порядке, скорее всего, ваша Bootstrap библиотека или ваша jQuery библиотека не загружена. Убедитесь, что они ..

Вот рабочий пример для подтверждения вашего метода:

runCommands()


function runCommands() {
  // run commands
  $('#id-findModal').modal()
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>

<div id="id-findModal" class="modal" tabindex="-1" role="dialog">
  <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>

Answer 2

$(document).ready(function () {
	$(document).on('click', '.open_popup', function () {
        //Your function goes here..//
		$('#myModal').modal('show');
	});
});

<a href="#" class="open_popup btn btn-xs" >Click For Popup</a>

<div id="myModal" class="modal fade" role="dialog" style="width:100%">
    <div class="modal-dialog" style="width: 60%;">
        <div class="modal-content" >
            <div class="modal-header">
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>

Answer 3

Похоже, JS файлы не загружены.

Позволяет выполнить некоторую отладку.

Открыть chrome dev инструменты. Go для типа консоли jQuery нажмите ввод. Вы должны увидеть функцию show в консоли, как показано ниже. Если нет, то вы должны включить jQuery на своей странице, либо в частичную, либо в основной шаблон.

Теперь давайте проверим, если bootstrap js загружен.

В консоли типа bootstrap вы должны увидеть объект, напечатанный в консоли, как показано на рисунке ниже. Если вы этого не видите, вам нужно включить bootstrap js файлы либо в частичный, либо в основной шаблон.

Я думаю, Поппер. js также необходимо, чтобы показать модал. Добавьте это также, если необходимо.

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

Возможно, вы вызываете модальную функцию до того, как DOM будет готов. Выполните ваши JS сценарии после того, как DOM будет готов

$(function() {
  // you js code

  $('#id-FindModal').modal('show');

});

Давайте также проведем дополнительную проверку.

$(function() {
  // your js code
  if($('#id-FindModal').length) {
     $('#id-FindModal').modal('show');
  } else {
    alert("Element with id - id-FindModal could not be found.");
  } 
});

Счастливое кодирование ....