如何在MVC視圖中關閉模式對話框？

Question

我正在開發ASP.NET MVC應用程序。

我已經用了boostrap。

當用戶單擊名為“顯示庫存”的鏈接時，我顯示了一個模式彈出對話框（您可以在圖像中看到它）。

我在框上顯示了確定並取消按鈕。

問題是，當我單擊“取消”按鈕時，該框會關閉，但僅在第一次時。 如果我再次打開對話框並單擊“取消”按鈕，框消失，純黑屏幕出現，而不是父屏幕。

我只想關閉模式框。 而不提及取消按鈕的網址。 那可能嗎 ？

這是我的代碼...

  <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

您應該仔細閱讀模態文檔。

如果提供了遠程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 2

嘗試使用以下內容：

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

單擊“取消”，嘗試使用以下內容：

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

要么

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

Answer 3

您應該在dismiss="modal"取消”按鈕上設置dismiss="modal"作為屬性，或嘗試以下操作：

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

嘗試這樣做，它應該關閉模式， 不要嘗試刪除/刪除實際的div