javascript - 如何检查是否在模态中？

Question

我有一段带有表单字段的通用 html 代码，我在多个地方重用了它。当在 Bootstrap 模式中打开时，我希望内容填充整个模式，但是当在其他地方使用时，我不希望它那么宽。我想使用 ng-class 来做到这一点，使用如下代码:

<div ng-class="modal ? 'col-sm-9' : ['col-sm-9 col-lg-5']">
   content...
</div>

问题是:如何检查代码是否在模态中？是否有一些我可以调用的函数或一些可以读取的变量？我想避免使用某些 isModal() 函数填充所有模态 Controller 。

Answer 1

我建议为此使用 CSS。然后，浏览器将识别片段是否出现在定义为模式的元素内，并正确应用样式。

假设您在 Bootstrap 实现中使用 LESS，示例如下。但无论哪种方式，它都应该给您一个总体概念。

更少的 CSS 标记:

div.content {
     .col-lg-5
}

modal {
     div.content {
          .col-sm-9;
     }
}

HTML:

 <div class="modal">
         <h1>Heading</h1>
         <div class="content"> 
              content...
         </div> 
 </div>