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>

这是图片......

enter image description here

当我打开对话框时，每次添加带有“模态背景”类的Div时我都无法将其删除...我在Google Chrome的Inspect Element窗口中检查了这个...

检查以下图片......

enter image description here

Answer 1

你应该仔细阅读模态文件。

如果提供了远程URL，则将通过jQuery的加载来加载内容方法并注入.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 2

尝试使用以下内容：

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

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

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

或

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

Answer 3

您的取消按钮应具有dismiss="modal"作为属性，或尝试以下操作：

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

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

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

3 个答案: