Question

我需要一种方法来识别第二个模态作为第一模态的孩子，例如：

.modal .modal {
   /*change some styles to make nested modal look different*/
}

即使我将第二个模态的HTML放在第一个模式的HTML中，当浏览器加载Bootstrap时，将它们编译为独立地位于#wrapper之外。

例如，我将其设置为：

<div id="wrapper">
  <div class="modal">
    <div class="modal"></div>
  </div>
</div>

但是在浏览器加载方面我得到了这个：

<div id="wrapper"></div>
<div class="modal"></div>
<div class="modal"></div>

所以我的css（.modal .modal）deosnt work。

有谁知道我如何识别儿童模态？

（我知道我可以将ID放在它们上面，但由于这些模式在其他页面上共享并且显示为独立的[非嵌套]模态，因此直接设置ID的样式将不起作用。）

Answer 1

您可以通过模态打开模态。这应该可以解决你的问题：）

Answer 2

我发现使用JQuery做一个不那么优雅的方法，但我愿意接受更好的建议。

    $(".modal [data-toggle='modal']").each(function( index ) {
        $(this).click(function() {
            var modalref = $(this).attr('data-target');
            $(modalref).addClass('child-modal');
        });
    });
   $('.modal [data-dismiss="modal"]').click(function() {
        $('.modal').removeClass('child-modal');
   });

有没有办法嵌套Twitter Bootstrap模式？

2 个答案: