Как закрыть модальное диалоговое окно в MVC View?

0

Я разрабатываю приложение 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>

Вот изображение...

Изображение 174551

Когда я открываю диалоговое окно, каждый раз, когда Div с "modal-backdrop in" class добавляется, и я не могу его удалить... Я проверил это в окне Inspect Element из Google chrome...

Проверьте изображение ниже...

Изображение 174551

Теги:
asp.net-mvc
asp.net-mvc-3

3 ответа

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>
  • 0
    Нет, не работает ... Когда я открываюсь во второй раз и пытаюсь закрыть его ... он снова показывает черный экран ... Я должен дважды щелкнуть по черному экрану только тогда, чтобы увидеть родительское окно ...
  • 0
    Нет ... Он не работает ... Он вообще не удаляется ... Если я нажимаю второй раз, мне нужно щелкнуть два раза на черном экране ... если я открываю диалог в третий раз и закрываю его ... тогда я должен нажать на черный экран три раза ... чтобы перейти в родительское окно ...
Показать ещё 27 комментариев
0

Вы должны убрать dismiss="modal" атрибут на кнопку отмены или попробовать следующее:

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

Попробуйте это, он должен закрыть модальный, не пытайтесь удалить/удалить фактический div

  • 0
    Пробовал, но не повезло ... $ ('# closeA'). Live ('click', function () {$ (this) .closest (". Modal"). Modal ('hide');});
  • 0
    Не могли бы вы создать пример JSFiddle для вашей страницы? Этот код должен работать в нормальном и динамическом сценарии. + воздерживаться от использования .live ()
0

Попробуйте использовать следующее:

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

Попробуйте использовать следующие действия при нажатии кнопки Отмена:

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

или

$('#dataConfirmModal').parent().remove();
  • 0
    Нет, не работает ... та же проблема ...
  • 0
    $ ( '# DataConfirmModal') диалог ( 'закрыть').
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню