可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I have a bootstrap modal dialog box that I want to show initially, then when the user clicks on the page, it disappears. I have the following:
$(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>
The modal is displayed initially, but it does not close when clicked outside of the modal. Also, the content area is not greyed out.. How can I get the modal to display initially, then close after the user clicks outside the area? And how can I get the background to be grayed out as in the demo?
回答1:
Put modal('toggle') instead of modal(toggle)
$(function () {
$('#modal').modal('toggle');
});
回答2:
to close bootstrap modal you can pass 'hide' as option to modal method as follow
$('#modal').modal('hide');
Please take a look at working fiddle here
bootstrap also provide events that you can hook into modal functionality, like if you want to fire a event when the modal has finished being hidden from the user you can use hidden.bs.modal event you can read more about modal methods and events here in Documentation
If none of the above method work, give a id to your close button and trigger click on close button.
回答3:
$('#modal').modal('toggle');
or
$('#modal').modal().hide();
should work.
But if nothing else works you can call the modal close button directly:
$("#modal .close").click()
回答4:
this worked for me:
<span class="button" data-dismiss="modal" aria-label="Close">cancel</span>
use this link modal close
回答5:
$("#your-modal-id").modal('hide');
Running this call via class ($(".my-modal")) won't work.
回答6:
Try This
$('#modal_id').modal('hide');
回答7:
this one is pretty good and it also works in angular 2
$("#modal .close").click()
回答8:
My five cents on this one is that I don't want to have to target the bootstrap modal with an id and seeing as there should be only one modal at a time the following should be quite sufficient to remove the modal as toggle could be dangerous:
$('.modal').removeClass('show');
回答9:
In some circumstances typing error could be the culprit. For instance, make sure you have:
data-dismiss="modal"
and not
data-dissmiss="modal"
Notice the double "ss" in the second example that will cause the Close button that fail.
回答10:
We can close the modal pop-up in the following ways:
// 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.
回答11:
<!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>
回答12:
$('.modal.in').modal('hide');
use the above code to hide the backdrop of modal if you are using multiple modal pop in one page.
回答13:
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);
}
}
});
};
回答14:
you can use;
$('#' + $('.modal.show').attr('id')).modal('hide');
回答15:
Using modal.hide would only hide the modal. If you are using overlay underneath the modal, it would still be there. use click call to actually close the modal and remove the overlay.
$("#modalID .close").click()
回答16:
Another way of doing this is that first you remove the class modal-open, which closes the modal. Then you remove the class modal-backdrop that removes the grayish cover of the modal.
Following code can be used:
$('body').removeClass('modal-open')
$('.modal-backdrop').remove()
回答17:
I closed modal Programmatically with this trick
Add a button in modal with data-dismiss="modal" and hide the button with display: none. Here is how it will look like
<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>
Now when you want to close modal Programmatically just trigger a click event on that button, which is not visible to user
In Javascript you can trigger click on that button like this:
document.getElementById('close-modal').click();
回答18:
This code worked perfectly for me to close a modal (i'm using bootstrap 3.3)
$('#myModal').removeClass('in')
回答19:
In my case, main page from where bootstrap modal was triggered started to not responding after using $("#modal").modal('toggle'); way, but started responding in the following way:
$("#submitBtn").on("click",function(){
$("#submitBtn").attr("data-dismiss","modal");
});
回答20:
This works well
$(function () {
$('#modal').modal('toggle');
});
However, when you have multiple modals stacking on top one another it is not effective, so instead , this works
data-dismiss="modal"
回答21:
Besides, you can "click" on a 'x', that closes dialog.
E.g.:
$(".ui-dialog-titlebar-close").click();
回答22:
After some test, I found that for bootstrap modal need to wait for some time before executing the $(.modal).modal('hide') after executing $(.modal).modal('show'). And i found in my case i need at least 500 milisecond interval between the two.
So this is my test case and solution:
$('.modal-loading').modal('show');
setTimeout(function() {
$('.modal-loading').modal('hide');
}, 500);
回答23:
In my case, I used a button to show the modal
<button type="button" class="btn btn-success" style="color:white"
data-toggle="modal" data-target="#my-modal-to-show" >
<i class="fas fa-plus"></i> Call MODAL
</button>
So in my code, to close the modal (that has the id = 'my-modal-to-show') I call that function (in Angular typescript):
closeById(modalId: string) {
$(modalId).modal('toggle');
$(modalId+ ' .close').click();
}
If I call $(modalId).modal('hide') it does't work and I don't know why
PS.: in my modal I coded that button element with .close class too
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
回答24:
some times the solution up doesn't work so you d have properly to remove the in class and add the css display:none manually .
$("#modal").removeClass("in");
$("#modal").css("display","none");
