仅为嵌套模式显示模态背景
我正在使用AngularJS并在一个html中有许多Bootstrap模式。 由于我需要在访问模态时与周围区域进行交互，因此我设置了：
.modal-backdrop { display: none; } 但是，现在我需要添加一个必须有背景的嵌套模态。 我该怎么做呢？
你可以确保在第一个模态打开时没有背景（同时）……
在每个data-toggle='modal'按钮上单击检查它。
$(document).on("click","[data-toggle='modal']",function(){ $(".modal-backdrop").eq(0).css({"display":"none"}); // if more than 1 modal openned. if($(".modal-backdrop").length>1){ // move backdrop up (in z) var ZindexBackdrop = parseInt($(".modal-backdrop").eq(0).css("z-index"))+20; console.log("Backdrop z-index: "+ZindexBackdrop); $(".modal-backdrop").eq(1).css({"z-index":ZindexBackdrop}); // move modal up (in z) var ZindexModal = parseInt($(".modal").eq(0).css("z-index"))+20; console.log("Modal z-index: "+ZindexModal); $(".modal").eq(1).css({"z-index":ZindexModal}); } });
要更改第一个模式/背景z-index在第一个…之上
你的第二个模态不能真正“嵌套”在第一个模态中。
因为父项的z-index如果父项已定义，则无法更改。
但要获得所需的嵌套效果，请仅将第二个模态触发按钮放在第一个模态中。
$(document).on("click","[data-toggle='modal']",function(){ $(".modal-backdrop").eq(0).css({"display":"none"}); // if more than 1 modal openned. if($(".modal-backdrop").length>1){ // move backdrop up (in z) var ZindexBackdrop = parseInt($(".modal-backdrop").eq(0).css("z-index"))+20; console.log("Backdrop z-index: "+ZindexBackdrop); $(".modal-backdrop").eq(1).css({"z-index":ZindexBackdrop}); // move modal up (in z) var ZindexModal = parseInt($(".modal").eq(0).css("z-index"))+20; console.log("Modal z-index: "+ZindexModal); $(".modal").eq(1).css({"z-index":ZindexModal}); } });