javascript 如何关闭MVC View中的模态对话框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22684277/
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
How to close the modal dialog box in MVC View?
提问by bnil
I am developing ASP.NET MVC application.
我正在开发 ASP.NET MVC 应用程序。
I have used boostrap for it.
我已经使用了boostrap。
I have shown a modal popup dialog box when user click on the the link called 'Show Stock' (You can see it in image.)
当用户单击名为“显示股票”的链接时，我显示了一个模态弹出对话框（您可以在图像中看到它。）
I have shown OK and cancel button on box.
我在盒子上显示了确定和取消按钮。
The Problem is , When I click on cancel button it box get close, but only at first time. If I again open dialog and click on cancel button box disappears and plain black screen appears not the parent screen.
问题是，当我单击取消按钮时，它会关闭框，但仅限于第一次。如果我再次打开对话框并单击取消按钮框消失，纯黑屏幕出现而不是父屏幕。
I just want to close the modal box. without mentioning the URL to the cancel button. Is that possible ?
我只想关闭模态框。没有提到取消按钮的 URL。那可能吗 ？
Here is my code...
这是我的代码...
<script type="text/javascript">
$(document).ready(function () {
$('#closeA').live('click', function(){
alert("asd");
$("body").remove( "div.modal-backdrop in");
});
$('#lnkAddProduct').click(function () {
// alert("Infuction");
var rIndex = $("select.clsProductId").length;
var ndate = new Date();
var time = ndate.getMilliseconds();
var IDD = rIndex + time;
$('#ProductList').append("<div class='span12' style='margin-left:0px' ><div class='span3'><select class='clsProductId ' name='ProductId' id='ddProductList_"+IDD+"' style = 'font-size:12px;width:200px;margin-right:10px;margin-left:20px;' onchange='get("+IDD+")'/> </div><div id='ProductCode_"+IDD+"' class='span1' style=' margin-left:30px;'></div><div id='Weight_"+IDD+"' class='span1' style=' margin-left:90px;'> </div><input type='text' id='Quantity_"+IDD+"' class='clsQuantity' name='Quantities' style='width:50px; margin-left:35px;' onblur='StockLinkVisible("+IDD+");' /> <a href='#' style='font-size:14px;text-decoration:none;font-weight:bold; color :#ee8929; margin-left:20px;' id='lnkRemove_"+IDD+"' class='clsRemove' onclick='removeElement(" + IDD+");'>X</a><a href='#' style='font-size:14px;text-decoration:none;font-weight:bold; color:White; margin-left:20px' id='lnkStockInfo_"+IDD+"' class='clsStockInfo' data-container='body' data-toggle='popover' data-placement='left' data-content='Vivamus sagittis lacus vel augue laoreet rutrum faucibus.' onclick='ShowStockInformation("+IDD+");'>Check Stock</a></div>");
getProductList(IDD);
});
});
function StockLinkVisible(cnt) {
$('#lnkStockInfo_'+ cnt).show();
$('#lnkStockInfo_'+ cnt).css("color", "#ee8929");
}
function DisplayAmendAdvancedPaidAmountAlert()
{
$('div').remove('#dataConfirmModal');
var href = $(this).attr('href');
if (!$('#dataConfirmModal').length) {
$('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="btnClose1"> × </button> <h5 id="dataConfirmLabel">Stock Availability at different locations.</h5> </div><div class="modal-body" > <table style="width:530px"><tr> <th style="width:120px">Bhivandi </th><th>Worli</th><th>Santacruze</th> <th> Saki-Naka</th> </tr> <tr> <td><div >60 </div></td> <td><div>3</div></td> <td><div >60 </div></td> <td><div>3</div></td> </tr> </table> </div> <div class="modal-footer"> <button type="button" id="btnOk1" class="btn btn-primary" data-dismiss="modal" aria-hidden="true" >OK</button> <button type="button" id="closeA" class="btn btn-default" data-dismiss="modal" aria-hidden="true" >Cancel</button> </div></div> ');
}
$('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
$('#dataConfirmOK').attr('href', href);
$('#dataConfirmModal').modal({show:true});
}
</script>
Here is the image...
这是图像...
When I open the dialog box , every time Div with "modal-backdrop in" class get added and I cant remove it... I have checked this in Inspect Element window of Google chrome...
当我打开对话框时，每次添加带有“modal-backdrop in”类的 Div 时我都无法删除它......我已经在谷歌浏览器的检查元素窗口中检查过这个......
Check the below image...
检查下面的图像...
回答by Muhammad Omair
You should read carefully the modal documentation.
您应该仔细阅读模态文档。
If a remote url is provided, content will be loaded via jQuery's load method and injected into the .modal-body
如果提供了远程 url，内容将通过 jQuery 的 load 方法加载并注入 .modal-body
Edited Section:
编辑部分：
try this:
试试这个：
<script type="text/javascript">
function DisplayAmendAdvancedPaidAmountAlert()
{
$( "div.modal-backdrop.in" ).remove();
$('div').remove('#dataConfirmModal');
// Cal();
var href = $(this).attr('href');
if (!$('#dataConfirmModal').length) {
$('body').append('<div id= "container" ><div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true" style="width: 500px;"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h6 id="dataConfirmLabel">Stock Availibility at diffrent locations</h6></div><div class="modal-body "><h4>Stocks</h4><br/> <table> <thead> <tr> <td>Bhivandi</td> <td>Santacruze</td> <td>Worli</td> </tr> </thead> <tbody> <tr> <td>12</td> <td>122</td> <td>54</td> </tr> </tbody> </table></div> <div class="alert alert-info" style="display:none;margin:5px" id="alertMessage"> </div><div class="modal-footer"><button id="closeA" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button><a class="btn btn-primary" id="dataConfirmOK">OK</a></div></div></div> ');
}
$('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
$('#dataConfirmOK').attr('href', href);
$('#dataConfirmModal').modal({show:true});
}
$(document).ready(function(){
$('#closeA').live('click', function(){
$('#container').hide();
});
});
</script>
回答by Tom Hofman
You should have dismiss="modal"as attribute on your cancel button or try the following:
您应该dismiss="modal"在取消按钮上具有as 属性或尝试以下操作：
$("#yourHideCloseButton").on('click', function(){
$(this).closest(".modal").modal('hide');
});
$("#yourHideCloseButton").on('click', function(){
$(this).closest(".modal").modal('hide');
});
Try that, it should close the modal, don'ttry to remove/delete the actual div
试试看，它应该关闭模态，不要尝试删除/删除实际div
回答by Shanky
Try using the following:
尝试使用以下方法：
$('#dataConfirmModal').dialog('close');
Try using the following on click of Cancel:
单击“取消”尝试使用以下命令：
$('#dataConfirmModal').remove();
or
或者
$('#dataConfirmModal').parent().remove();
