如何关闭 MVC 视图中的模态对话框？

Question

我正在开发 ASP.NET MVC 应用程序。

我已经使用了 boostrap。

当用户单击名为“显示库存”的链接时，我显示了一个模式弹出对话框 （您可以在图像中看到它。）

我在框中显示了确定和取消按钮。

问题是，当我单击取消按钮时，它会关闭，但仅在第一次。 如果我再次打开对话框并单击取消按钮框消失并且纯黑屏出现而不是父屏幕。

我只想关闭模态框。没有提及取消按钮的 URL。 那可能吗 ？

这是我的代码...

  <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>

这是图片...

当我打开对话框时，每次添加带有“modal-backdrop in”类的 Div 并且我无法删除它...我已经在 Google chrome 的 Inspect Element 窗口中检查了这个...

查看下图...

Answer 1

尝试使用以下方法：

$('#dataConfirmModal').dialog('close'); 

在点击取消时尝试使用以下内容：

 $('#dataConfirmModal').remove();

或

$('#dataConfirmModal').parent().remove();

Answer 2

您应该仔细阅读模态文档。

如果提供了远程 url，内容将通过 jQuery 的 load 加载 方法并注入到 .modal-body

编辑部分：

试试这个：

<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>

Answer 3

您应该在取消按钮上使用 dismiss="modal" 作为属性或尝试以下操作：

$("#yourHideCloseButton").on('click', function(){ $(this).closest(".modal").modal('hide'); });

试试吧，它应该关闭模式，不要尝试删除/删除实际的div