Saya memiliki modal bootstrap kotak dialog yang ingin saya tampilkan pada awalnya, kemudian ketika user klik pada halaman, itu menghilang. Saya memiliki berikut:
$(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 ditampilkan awalnya, tapi itu tidak menutup ketika diklik di luar modal. Juga, area konten tidak diperdulikan.. Bagaimana saya bisa mendapatkan modal untuk tampilan awalnya, kemudian tutup setelah pengguna mengklik luar daerah? Dan bagaimana saya bisa mendapatkan latar belakang berwarna abu-abu seperti yang di demo?
untuk menutup bootstrap modal anda dapat lulus 'hide' sebagai pilihan untuk modal metode sebagai berikut
$('#modal').modal('hide');
Silakan lihat di tempat kerja [biola di sini][2]
bootstrap juga menyediakan acara itu anda dapat menghubungkan ke modal fungsi, seperti jika anda ingin menjalankan sebuah event ketika modal telah selesai yang tersembunyi dari pengguna, anda dapat menggunakan tersembunyi.b.modal acara anda dapat membaca lebih lanjut tentang modal, metode dan peristiwa-peristiwa berikut di Dokumentasi
Jika tidak satupun dari metode di atas bekerja, memberikan id untuk anda tombol close dan memicu klik pada tombol close.
ini bekerja untuk saya:
<span class="button" data-dismiss="modal" aria-label="Close">cancel</span>
gunakan link ini modal close
Saya lima sen yang satu ini adalah bahwa saya don't ingin memiliki target bootstrap modal dengan id dan melihat harus ada hanya satu modal pada waktu yang berikut ini harus cukup memadai untuk menghapus modal sebagai toggle bisa berbahaya:
$('.modal').removeClass('show');
Dalam beberapa keadaan mengetik kesalahan bisa menjadi pelakunya. Misalnya, pastikan anda memiliki:
data-dismiss="modal"
dan tidak
data-dissmiss="modal"
Pemberitahuan ganda "ss" pada contoh kedua yang akan menyebabkan tombol Close yang gagal.
Kami dapat menutup modal pop-up dengan cara berikut:
// 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>
$('.modal.di').modal('hide');
gunakan kode diatas untuk menyembunyikan latar belakang dari modal jika anda menggunakan beberapa modal pop dalam satu halaman.
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);
}
}
});
};
Cara lain untuk melakukan ini adalah yang pertama anda menghapus class modal-terbuka, yang menutup modal. Kemudian anda menghapus class modal-latar belakang yang menghilangkan keabu-abuan penutup dari modal.
Berikut kode yang dapat digunakan:
$('body').removeClass('modal-open')
$('.modal-backdrop').remove()
aku menutup modal Pemrograman dengan trik ini
Tambahkan sebuah tombol dalam modal dengan data-dismiss="modal"
dan menyembunyikan tombol dengan display: none
. Berikut adalah bagaimana hal itu akan terlihat seperti
<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>
Sekarang ketika anda ingin menutup modal Pemrograman hanya pemicu acara klik pada tombol, yang tidak terlihat oleh pengguna
Dalam Javascript anda dapat memicu klik pada tombol seperti ini:
document.getElementById('close-modal').click();
Menggunakan modal.menyembunyikan hanya akan menyembunyikan modal. Jika anda menggunakan overlay di bawah modal, masih akan ada. gunakan klik panggilan untuk benar-benar menutup modal dan menghapus overlay.
$("#modalID .close").click()
Dalam kasus saya, halaman utama dari mana bootstrap modal dipicu mulai tidak merespons setelah menggunakan $("#modal").modal('toggle');
, tapi mulai menanggapi dengan cara sebagai berikut:
$("#submitBtn").on("click",function(){
$("#submitBtn").attr("data-dismiss","modal");
});