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

770

Я использую функциональность модального окна Twitter Bootstrap. Когда кто-то нажимает кнопку «Отправить» в моей форме, я хочу показать модальное окно после нажатия кнопки «Отправить» в форме.

<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard Form</h2>
    <input type="text" value=""/>
    <input type="submit"/>
</form>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

JQuery:

$('#myform').on('submit', function(ev) {
    $('#my-modal').modal({
        show: 'false'
    }); 


    var data = $(this).serializeObject();
    json_data = JSON.stringify(data);
    $("#results").text(json_data); 
    $(".modal-body").text(json_data); 

    // $("#results").text(data);

    ev.preventDefault();
});
javascript jquery twitter-bootstrap user244394
источник
У вас есть опечатка в вашем варианте шоу. Требуется логическое значение, поэтому не заключайте в кавычки значение false - $ ('# my-modal'). Modal ({show: false});
Даррен Паркер

Ответы:

1413

Bootstrap имеет несколько функций, которые можно вызывать вручную на модальных моделях:

$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');

Вы можете увидеть больше здесь: Модальный компонент Bootstrap

Конкретно раздел методы .

Так что вам нужно изменить:

$('#my-modal').modal({
    show: 'false'
});

чтобы:

$('#myModal').modal('show');

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

https://www.youtube.com/watch?v=zK4nXa84Km4

гнаться
источник
5
Я не уверен, почему это не работает в моем случае. У меня на странице такой же демонстрационный код, и я закодировал кнопку отправки, как указано выше. Однако, когда я нажимаю на кнопку отправки, модальное окно быстро мигает и исчезает. Я должен нажать кнопку «Назад» браузера, чтобы вернуться на страницу.
Chris22
6
Я нашел ответ здесь на мой комментарий выше. Двойная ссылка на bootrap.js на страницах сайта.
Chris22
1
Uncaught TypeError: $ (...). Modal - это не функция, это, вероятно, я, но есть идеи, почему я получаю эту ошибку? (У меня есть JQuery)
Владимир verleg
4
Я обнаружил свою проблему, я сделал ajax-вызов для файла, который включал Jquery. Если jQuery включен 2 раза, он не работает!
Владимир верлег
2
Я пытался, .modal('show')но в браузере Google Chrome его не работает
Дурга
89

Кроме того, вы можете использовать через атрибут данных

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

В этом конкретном случае вам не нужно писать JavaScript.

Вы можете увидеть больше здесь: http://getbootstrap.com/2.3.2/javascript.html#modals

Gandarez
источник
4
Чтобы уточнить: «не нужно использовать javascript» означает «не нужно писать javascript», javascript все еще используется. Я попытался отредактировать ответ, но он был отклонен, потому что он не был «более точным». Если вы попробуете приведенный выше код с отключенным JavaScript, он не будет работать. Это означает, что вы используете Javascript для меня.
нпретто
83

Чаще всего, когда $('#myModal').modal('show');не работает, это вызвано включением jQuery дважды. Включение jQuery 2 раза заставляет модалы не работать.

Удалите одну из ссылок, чтобы она снова заработала.

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

jQuery.noConflict(); 
$('#myModal').modal('show');
Владимир Верлег
источник
3
DataTables с его предварительно упакованной версией jQuery вызвали это для меня
Уэсли Смит,
2
Большое спасибо. У меня та же проблема: модал это не функция. Но после добавления jQuery.noConflict () это работает.
Джобайер Ахмед
1
Следует отметить, что этот обходной путь следует использовать только в том случае, если вы не можете устранить основную причину (т. Е. Только один раз включить jQuery). Если какой-либо сторонний плагин включает его, либо найдите не включенную версию, либо свяжитесь с третьей стороной, чтобы создать ее.
rybo111
19

Просто вызовите модальный метод (без передачи каких-либо параметров) с помощью jQueryселектора.

Вот пример:

$('#modal').modal();
Brane
источник
1
Как мне передать больше параметров моему модалу? Например, конкретный (динамический) идентификатор?
Патрос
1
Как сделать свой идентификатор динамичным? Вы делаете это по ID? если да, вы можете использовать функциональность $ (this) из jQuery для выбора текущего объекта и передачи ему параметров.
Брейн
13

Если вы используете функцию ссылки onclick для вызова модального объекта с помощью jQuery, «href» не может быть нулевым.

Например:

... ...
<a href="" onclick="openModal()">Open a Modal by jQuery</a>
... ...
... ...
<script type="text/javascript">

function openModal(){

    $('#myModal').modal();
}       
</script>

Модал не может показать. Правильный код:

<a href="#" onclick="openModal()">Open a Modal by jQuery</a>
saneryee
источник
12

Вот как загрузить оповещение при загрузке, как только документ будет готов. Это очень просто добавить

 $(document).ready(function(){
   $("#myModal").modal();
});

Я сделал демо на W3Schools.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Here is how to load a bootstrap modal as soon as the document is ready </h2>
  <!-- Trigger the modal with a 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>

<script>
$(document).ready(function(){
   $("#myModal").modal();
});
</script>

</body>
</html>
Развернуть фрагмент

csandreas1
источник
10

Ознакомьтесь с полным решением здесь:

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_show&stacked=h

Убедитесь, что библиотеки расположены в необходимом порядке, чтобы получить результат:

1- Первая начальная загрузка.min.css 2- jquery.min.js 3- Начальная загрузка.min.js

(Другими словами jquery.min.js должен быть вызван до bootstrap.min.js)

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script> 

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
A.Aleem11
источник
7

Я попробовал несколько методов, которые потерпели неудачу, но ниже работает для меня как шарм:

$('#myModal').appendTo("body").modal('show');
обычно
источник
2
Одни и те же! Это единственное решение, которое сработало и для меня.
Pengz
Ты уверен, что не хотел .appendTo("modal-body")?
Джеймс А. Мохлер
@novembersky, вам нужно поместить код в событие клика или когда страница загружается с помощью jquery: $ (document) .ready (function () {$ ("# myModal"). modal ();});
Абхиджит Кумар
7

Попробуйте использовать jQuery вместо знака $ при вызове функции, в моем случае это работало, как вы можете видеть ниже.

jQuery.noConflict(); 
jQuery('#myModal').modal('show');

jQuery.noConflict (); потому что когда jQuery ('# myModal'). modal ('show'); не работает, это вызвано тем, что дважды включил jQuery. Включение jQuery 2 раза заставляет модалы не работать. и это решило бы проблему в этом случае, поскольку в моем случае это повторяется.

Далее вы можете перейти по этой ссылке

Окно модели начальной загрузки не отображается при вызове через JQuery

IB
источник
4

Пытаться

$("#myModal").modal("toggle")

Чтобы открыть или закрыть модал с идентификатором myModal.

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

1: - Переместите bootstrap.js вниз, чтобы он переопределил другие файлы js.

2: - Убедитесь, что заказ как ниже

<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Other js files -->
<script src="plugins/jQuery/bootstrap.min.js"></script>
Нихил Мохадикар
источник
4 
<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard Form</h2>
    <input type="text" value=""/>
    <input type="submit" id="submitButton"/>
</form>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

Вы можете запустить модал с кодом ниже этого.

$(document).ready(function(){
    $("#submitButton").click(function(){
        $("#myModal").modal();
    });
});
Alperzkn
источник
1

Попробуй это

myModal1 это идентификатор модального

$('#myModal1').modal({ show: true });
Вивек
источник
0 
<script type="text/javascript">
    $(function () {
        $("mybtn").click(function () {
            $("#my-modal").modal("show");
        });
    });
</script>
Сахнош Рахгузар
источник
3
При ответе на вопросы, на которые уже есть ответы, попробуйте расширить существующие ответы. Также, как правило, стоит добавить объяснение того, как ваш код отвечает на вопрос.
Крис Камаратта
0

Bootstrap 4.3 - больше здесь

Показать фрагмент кода

Камил Келчевски
источник