[英]Close bootstrap modal after submit
How can I close the bootstrap modal after I click on the Delete
button?单击“
Delete
按钮后如何关闭引导程序模式? Here's my code:这是我的代码:
<div id="media_delete_confirmation" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<form id="modal-form">
<div class="modal-body">
<input id="media_action" value="deleteMediaAction" type="hidden"/>
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Keep</button>
<button type="button" class="btn btn-default" id="modal_delete">Delete</button>
</div>
</form>
</div>
</div>
</div>
and here's the other part:这是另一部分:
$("#modal_delete").click(function() {
var id = $(".image-picker").val();
var media_action = $("#media_action").val();
$.ajax({
type: 'POST',
url: '?page=myMediaController&action=deleteMedia',
data: {'media_id' : id},
success: function(data) {
$("#media_delete_confirmation").modal("hide");
}
});
});
I had the same issue, and was able to get the modal dialog to close this way:我遇到了同样的问题,并且能够以这种方式关闭模态对话框:
<div id="approveDialog" class="modal approveDialog hide">
<!-- various form elements -->
<div class="modal-footer pull-center">
<a href="#" data-dismiss="modal" aria-hidden="true" class="btn">Back to Listings</a>
<button id="submitApprove" class="btn btn-success">Shop</button>
</div>
</div>
$('button#submitApprove').on("click", function(event) {
// submit form via ajax, then
event.preventDefault();
$('#approveDialog').modal( 'hide' );
});
No need to hide model using javascript, you can simply use data-dismiss="modal" in the button tag attribute as follows.无需使用 javascript 隐藏模型,您可以简单地在按钮标签属性中使用 data-dismiss="modal" ,如下所示。
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Keep</button>
<button type="button" class="btn btn-default" id="modal_delete" data-dismiss="modal">Delete</button>
</div>
you can simply hide modal on submit $('#media_delete_confirmation').modal('hide');您可以简单地在提交时隐藏模态 $('#media_delete_confirmation').modal('hide'); //to hide modal
//隐藏模态
V3 you can try V3你可以试试
success: function(data) {
// close modal
$( '#media_delete_confirmation' ).modal( 'hide' ).data( 'bs.modal', null );
// event after hidden
$('#media_delete_confirmation').on('hidden', function(){
$(this).data('modal', null); // destroys modal
});
}
Version 2版本 2
$( '#media_delete_confirmation' ).remove();
$( '.modal-backdrop' ).remove(); // removes the overlay
I just had the same problem.我只是遇到了同样的问题。 I was trying to close a modal window after submit.
我试图在提交后关闭一个模态窗口。 The only way that I could solve it was doing the following.
我可以解决它的唯一方法是执行以下操作。
In the success function, I added this code via jQuery:在成功函数中,我通过 jQuery 添加了这段代码:
success: function(respuesta){
$('#btnGuardarCambios').attr("data-dismiss", "modal");
On the "save changes" button, I used the attr
method.在“保存更改”按钮上,我使用了
attr
方法。 If the ajax is successful, I just add a new attribute ( data-dismiss
) and set the value of it (modal) else the modal won't disappear.如果 ajax 成功,我只需添加一个新属性(
data-dismiss
)并设置它的值(模态),否则模态不会消失。
EDIT: This isn´t working on IE and Chrome, only works on Mozilla :c编辑:这不适用于 IE 和 Chrome,仅适用于 Mozilla :c
Just try on a <script>
before the end of your body writing this在你的身体写完之前尝试一个
<script>
$('#media_delete_confirmation').submit(function() {
$('#media_delete_confirmation').modal('hide');
});
first add a id or class in this submit button like closemodel.首先在此提交按钮中添加一个 id 或类,如 closemodel。 then add another id or class in this first div.
然后在第一个 div 中添加另一个 id 或类。 then add this jquery code
然后添加这个jquery代码
<script> $(document).ready(function() { $('#closemodel').click(function() { $('#CreateAccount1').modal('toggle'); }); }); </script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.