Я разрабатываю приложение 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>
Вот изображение...
Когда я открываю диалоговое окно, каждый раз, когда Div с "modal-backdrop in" class добавляется, и я не могу его удалить... Я проверил это в окне Inspect Element из Google chrome...
Проверьте изображение ниже...
Вы должны внимательно прочитать модальную документацию.
Если предоставлен удаленный 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>
Вы должны убрать dismiss="modal"
атрибут на кнопку отмены или попробовать следующее:
$("#yourHideCloseButton").on('click', function(){ $(this).closest(".modal").modal('hide'); });
Попробуйте это, он должен закрыть модальный, не пытайтесь удалить/удалить фактический div
Попробуйте использовать следующее:
$('#dataConfirmModal').dialog('close');
Попробуйте использовать следующие действия при нажатии кнопки Отмена:
$('#dataConfirmModal').remove();
или
$('#dataConfirmModal').parent().remove();