Bootstrap多模态模态背景问题

我有一个页面，其中一个Bootstrap模态打开另一个模态。

问题在于，每个打开的模态都会增加

到HTML代码。 这对第一个很好，但因为它opacity: .5; 然后它会在打开的每个模态上使页面变暗。 有没有办法检查modal-backdrop已经存在，并且在这种情况下不打开另一个？

我打开我的模态

Modal

或者使用jQuery：

$('#modal_01').modal('show');

非常感谢对此问题的任何帮助！

这里有一个方便您的小提琴： https ： //jsfiddle.net/zsk4econ/1/

Answer 1

这是我认为适合您的工作演示。

 $(".modal").on("shown.bs.modal", function () { if ($(".modal-backdrop").length > 1) { $(".modal-backdrop").not(':first').remove(); } }) 

    
  Open Modal  
 
  
 
 Open Modal 
 
 
 
  
 
  
 
 Open Modal 3 
 
 
 
  

Answer 2

让CSS处理它。

 .modal-backdrop:nth-child(2n-1) { opacity : 0; } 

https://jsfiddle.net/zsk4econ/3/

Answer 3

您可以添加/删除data-backdrop =“false”属性取决于要求。 否则你也可以包括css

 .modal-backdrop+.modal-backdrop { opacity : 0; } 

Answer 4

 $(document).on('show.bs.modal', '.modal', function () { if ($(".modal-backdrop").length > -1) { $(".modal-backdrop").not(':first').remove(); } });