Как открыть модальное окно Bootstrap с помощью jQuery?
Описание проблемы:
Я использую функциональность модальных окон от 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>
<!-- Модальное окно -->
<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">Заголовок модального окна</h3>
</div>
<div class="modal-body">
<p>Текст модального окна...</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Закрыть</button>
<button class="btn btn-primary">Сохранить изменения</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);
ev.preventDefault();
});
Проблема: Модальное окно не отображается при отправке формы. Я хотел бы, чтобы модальное окно открывалось, и в нем отображались данные формы сразу после нажатия кнопки "Отправить". Подскажите, как это исправить?
5 ответ(ов)
Чаще всего, когда $('#myModal').modal('show'); не срабатывает, это происходит из-за того, что jQuery подключен дважды. Подключение jQuery дважды может привести к тому, что модальные окна перестают работать.
Чтобы решить эту проблему, удалите одну из ссылок на jQuery.
Кроме того, некоторые плагины могут вызывать ошибки. В этом случае добавьте следующий код:
jQuery.noConflict();
$('#myModal').modal('show');
Это должно помочь устранить проблему.
Вы можете использовать атрибуты данных для управления модальным окном, например:
<button type="button" data-toggle="modal" data-target="#myModal">Запустить модальное окно</button>
В этом случае вам не нужно писать JavaScript.
Больше информации вы можете найти здесь: документация Bootstrap.
Чтобы вызвать модальное окно, просто используйте метод modal() без передачи каких-либо параметров с помощью селектора jQuery. Вот пример:
$('#modal').modal();
Ваш код содержит ошибку в селекторе jQuery для кнопки. Вам необходимо добавить символ # перед mybtn, чтобы выбрать элемент с идентификатором mybtn. Также убедитесь, что у вас правильно настроена HTML-разметка для кнопки и модального окна. Вот исправленный вариант:
<script type="text/javascript">
$(function () {
$("#mybtn").click(function () {
$("#my-modal").modal("show");
});
});
</script>
Теперь код должен корректно работать: при клике на кнопку с идентификатором mybtn будет отображаться модальное окно с идентификатором my-modal.
Я пробовал несколько методов, которые не сработали, но вот этот сработал как по волшебству:
$('#myModal').appendTo("body").modal('show');
Как перенаправить на другую веб-страницу?
Прокрутка к элементу с использованием jQuery
jQuery: Получение Выбранного Значения Из Выпадающего Списка
Как проверить радио-кнопку с помощью jQuery?
Кэширует ли Safari на iOS 6 результаты $.ajax?