У меня есть модальное диалоговое окно bootstrap, которое я хочу показать вначале, а затем, когда пользователь щелкает по странице, оно исчезает. У меня есть следующее:
$(function () {
$('#modal').modal(toggle)
});
<div class="modal" id='modal'>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Error:</h3>
</div>
<div class="modal-body">
<p>Please correct the following errors:</p>
</div>
</div>
</div>
Модальное окно отображается изначально, но оно не закрывается при щелчке вне модального окна. Кроме того, область содержимого не закрашивается серым цветом. Как сделать так, чтобы модал отображался изначально, а затем закрывался после того, как пользователь щелкнет за пределами области? И как сделать так, чтобы фон был выделен серым цветом, как в демо-версии?
Поместите modal('toggle')
вместо modal(toggle)
.
$(function () {
$('#modal').modal('toggle');
});
Чтобы закрыть бутстрап modal, вы можете передать 'hide' в качестве опции в метод modal следующим образом
$('#modal').modal('hide');
Пожалуйста, посмотрите на работу [fiddle here][2].
bootstrap также предоставляет события, которые вы можете подключить к функциональности modal, например, если вы хотите вызвать событие, когда модальное окно будет скрыто от пользователя, вы можете использовать hidden.bs.modal событие, вы можете прочитать больше о модальных методах и событиях здесь в Документация.
Если ни один из вышеперечисленных методов не работает, присвойте id вашей кнопке закрытия и инициируйте нажатие на кнопку закрытия.
$('#modal').modal('toggle');
или
$('#modal').modal().hide();
должен работать.
Но если ничто другое не работает, вы можете позвонить кнопку Закрыть модальное напрямую:
$("#modal .close").click()
этот работал для меня:
<span class="button" data-dismiss="modal" aria-label="Close">cancel</span>
используйте эту ссылку модал закрыть
$("#your-modal-id").modal('hide');
Выполняется этот вызов через Я класс ($(&;.мой модальные", у))
выиграл't работа.
это очень хорошо и он также работает в угловые 2
$("#modal .close").click()
Мои пять копеек по этому поводу заключаются в том, что я не хочу нацеливать bootstrap-модал на id, и поскольку в один момент времени должен быть только один модал, следующего должно быть вполне достаточно для удаления модала, поскольку переключение может быть опасным:
$('.modal').removeClass('show');
Попробуйте Это
$('#modal_id').modal('hide');
В некоторых обстоятельствах опечатка могла быть виновницей. Например, убедитесь, что у вас есть:
data-dismiss="modal"
и не
data-dissmiss="modal"
Обратите внимание на двойное-то "СС" в втором примере, что приведет к кнопку Закрыть, что получится.
Мы можем закрыть модальное всплывающее следующими способами:
// We use data-dismiss property of modal-up in html to close the modal-up,such as
<div class='modal-footer'><button type='button' class="btn btn-default" data-dismiss='modal'>Close</button></div>
// We can close the modal pop-up through java script, such as
<div class='modal fade pageModal' id='openModal' tabindex='-1' data-keyboard='false' data-backdrop='static'>
$('#openModal').modal('hide'); //Using modal pop-up Id.
$('.pageModal').modal('hide'); //Using class that is defined in modal html.
в
<!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/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(window).load(function(){
$('#myModal').modal('show');
});
$(function () {
$('#modal').modal('toggle');
});
</script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</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">×</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>
</body>
</html>
в
$('.модал.в').модал('скрыть#39;);
использовать приведенный выше код, чтобы скрыть фон модального, если вы используете несколько модальные всплывающие на одной странице.
function Delete(){
var id = $("#dgetid").val();
debugger
$.ajax({
type: "POST",
url: "Add_NewProduct.aspx/DeleteData",
data: "{id:'" + id + "'}",
datatype: "json",
contentType: "application/json; charset=utf-8",
success: function (result) {
if (result.d == 1) {
bindData();
setTimeout(function(){ $('#DeleteModal').modal('hide');},1000);
}
}
});
};
вы можете использовать;
$('#' + $('.modal.show').attr('id')).modal('hide');
Другой способ сделать это заключается в том, что сначала вы удалите класс модал-Open, который закрывает модальное. Затем удалить модально-фон класса, который удаляет крышка сероватого модала.
Можно использовать следующий код:
$('body').removeClass('modal-open')
$('.modal-backdrop').remove()
я закрыл модальное программно с помощью этого трюка
Добавить кнопку в модальном с Data-увольте=то"режимный"
В и скрыть кнопку с дисплей: нет. Вот как это будет выглядеть
<div class="modal fade" id="addNewPaymentMethod" role="dialog">
<div class="modal-dialog">
.
.
.
<button type="button" id="close-modal" data-dismiss="modal" style="display: none">Close</button>
</div>
</div>
Теперь, когда вы хотите закрыть модальное программно просто триггер события click на эту кнопку, которая не отображается для пользователя
В JavaScript, вы можете вызвать нажать на кнопку, как это:
document.getElementById('close-modal').click();
Используя модальный.спрятаться бы только скрыть модальное. Если вы используете накладку под режимный, он все равно будет там. использовать кнопку вызова, чтобы фактически закрыть модальное и снимите накладку.
$("#modalID .close").click()
Этот код прекрасно работал для меня, чтобы закрыть модальное (я'м с помощью Bootstrap 3.3)
$('#myModal').removeClass('in')
В моем случае, главная страница, с которой Bootstrap модальные была спровоцирована начали не отвечает после использования $(" и#модал-то").модал('переключить');
способ, но начал отвечать следующим образом:
$("#submitBtn").on("click",function(){
$("#submitBtn").attr("data-dismiss","modal");
});