Як відкрити модальне вікно Bootstrap за допомогою jQuery?

769

Я використовую функцію модального вікна 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: $ (...). Модаль - це не функція, це, мабуть, я, але будь-які ідеї, чому я отримую цю помилку? (у мене є jQuery)
— Vladimir 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

— Гандарез
джерело
4
Для уточнення: "не потрібно використовувати javascript" означає "не потрібно писати javascript", JavaScript все ще використовується. Я спробував відредагувати відповідь, але її відхилили, оскільки вона не була "точнішою". Якщо ви спробуєте код вище з відключеним javascript, він не працюватиме. Це означає, що ви дійсно використовуєте для мене javascript.
— npretto
83

Найчастіше, коли $('#myModal').modal('show');це не працює, це викликано включенням jQuery двічі. Включення jQuery 2 рази змушує модалі не працювати.

Видаліть одне з посилань, щоб воно знову працювало.

Крім того, деякі плагіни також викликають помилки, у цьому випадку додайте 

jQuery.noConflict(); 
$('#myModal').modal('show');
— Володимир верлег
джерело
3
DataTables з його попередньо упакованою версією jQuery спричинив це для мене
— Веслі Сміт
2
Дуже дякую. У мене є та ж проблема: модаль - це не функція. Але після додавання jQuery.noConflict () він працює.
— Jobayer Ahmmed
1
Слід зазначити, що цей спосіб вирішення слід використовувати лише в тому випадку, якщо ви не зможете вирішити першопричину (тобто включайте jQuery лише один раз). Якщо плагін третьої сторони включає його, або зверніться до невключеної версії або зверніться до третьої сторони, щоб створити її.
— rybo111
19

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

Ось приклад:

$('#modal').modal();
— Бран
джерело
1
Як я можу передавати більше параметрів моєму модальному режиму? Наприклад, конкретний (динамічний) ідентифікатор?
— Pathros
1
Як зробити ваш ідентифікатор динамічним? Ви робите це за ідентифікатором? якщо так, ви можете використовувати $ (це) функціональність від 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- Перший bootstrap.min.css 2- jquery.min.js 3- bootstrap.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'). модальний ('показ'); не працює, це викликано включенням jQuery двічі. Включення jQuery 2 рази змушує модалі не працювати. і це вирішило б проблему в тому випадку, як і в моєму випадку, це повторюється.

Далі ви можете перейти за цим посиланням

Вікно моделі завантажувальної машини не відображається дзвінками через JQuery

— ІБ
джерело
4

Спробуйте

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

Щоб відкрити або закрити модаль з id 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();
    });
});
— Альперзкн
джерело
1

Спробуйте це

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

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

Bootstrap 4.3 - більше тут

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

— Каміль Київчевський
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.