在我的JSP页面中,我有一个模式,该模式显示了具有另一个模式(内部模式)的页面。
第一个模态:
<div class="modal-dialog modal-lg" style="background: white; width: 90% !important">
<input type="hidden" id="report-request-data-id" value="${requestId}"/>
<div class="modal-body">
<div id="reportDataDetailsDiv"></div>
</div>
<div class="modal-footer">
<label class="btn-is float">
<spring:message code='close.label'/>
<input type="button" id="close_report_request_view" class="col-xs-3 col-lg-1 col-md-1" data-dismiss="modal" style="display: none;"/>
</label>
</div>
</div>
内部模式(在上面的ID为“ reportDataDetailsDiv”的div中加载):
<div class="modal-dialog modal-lg" style="background: white;border-radius: 6px;">
<div class="modal-body">
<div class="modal-content">
<div class="col-centered col-lg-12 col-xs-12 ">
.....etc
<div class="modal-footer">
<label class="btn-is float">
<spring:message code='close.label'/>
<input type="button" class="cus-close-modal-btn col-xs-3 col-lg-1 col-md-1" style="display: none;"/>
</label>
</div>
</div>
</div>
</div>
当我单击内部模式中的关闭按钮时,就会发生问题。当我这样做时,两个模式都被关闭,但是我希望关闭动作对于每个模式都是独立的。我应该如何正确地做到这一点?
谢谢。
答案 0 :(得分:0)
当您在主模式内的col
c
a
b
中加载其他模式时,可以使用reportDataDetailsDiv
显示它,每当单击.show()
按钮时,您都可以删除整个close
在div
中添加。
演示代码 :
reportDataDetailsDiv
//suppose other modal is added like below
$(".addmodal").click(function() {
//append modal undr div
$("#reportDataDetailsDiv").html('<div class="modal-dialog modal modal-child" style="background: white;border-radius: 6px;" ><div class="modal-body"><div class="modal-content">Some message to show ....<div class="col-centered col-lg-12 col-xs-12 "><div class="modal-footer"> <label class="btn-is float"><input type="button" class="cus-close-modal-btn " value ="Close" style=""/> </label> </div></div></div></div>')
$(".modal-child").show(); //show that modal
$(this).hide();
$("#close_report_request_view").prop('disabled', true);//disable main modal button
})
//onclick of close button for modal added
$(document).on('click', '.cus-close-modal-btn', function() {
$(this).closest(".modal-child").remove(); //remove whole div
$("#close_report_request_view").prop('disabled', false);//enable main modal buton
});