jQuery 提交后关闭引导模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29754902/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Close bootstrap modal after submit
提问by asdasdas
How can I close the bootstrap modal after I click on the Deletebutton? Here's my code:
单击Delete按钮后如何关闭引导程序模式？这是我的代码：
<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");
}
});
});
回答by yetimoner
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' );
});
回答by Nilesh Mahajan
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>
回答by Raja Khoury
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
回答by Olvin Camara
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 attrmethod. 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.
在“保存更改”按钮上，我使用了该attr方法。如果ajax成功，我只需添加一个新属性（data-dismiss）并设置它的值（模态），否则模态不会消失。
EDIT: This isn′t working on IE and Chrome, only works on Mozilla :c
编辑：这不适用于 IE 和 Chrome，仅适用于 Mozilla :c
回答by Ivan
Just try on a <script>before the end of your body writing this
在<script>你的身体写完之前尝试一下
$('#media_delete_confirmation').submit(function() {
$('#media_delete_confirmation').modal('hide');
});
回答by Ivan
first add a id or class in this submit button like closemodel. then add another id or class in this first div. then add this jquery code
首先在此提交按钮中添加一个 id 或类，如 closemodel。然后在第一个 div 中添加另一个 id 或类。然后添加这个jquery代码
<script>
$(document).ready(function() {
$('#closemodel').click(function() {
$('#CreateAccount1').modal('toggle');
});
});
</script>回答by Deepak Singh Rajput
you can simply hide modal on submit
你可以简单地在提交时隐藏模式
$('#media_delete_confirmation').hide(); //to hide modal
$('.modal-backdrop').remove(); //to remove backdrop
