html - 如何使用 AngularJS 在我的页面上的模式下放置一个 mask ？

Question

我有 HTML/AngularJS 代码在我的页面上显示主要内容窗口或模式。

<div id="header">
      .
</div>
<div id="main">
   <div id="content" ng-show ..>
      ...
   </div>
   <div id="modal"   ng-show ..>
      .
   </div>
</div>

我的代码在查看内容或模态区域时适本地设置 ng-show。

这很好用，但我遇到的问题是，当用户在模态屏幕上时，标题仍然可以触摸。有没有一种方法可以在查看模态时放置一个 mask 或其他东西来阻止标题区域可触摸。

Answer 1

我不确定你是如何设置它的。

您可以在整个屏幕上添加叠加层:

 <div class="modal" ng-show="activeModal">
   <div class="modal-content">
     ...
   </div>
 </div>

modal-content 是主模态。包装父级是覆盖层。

那么只要你的模态框有比header高的z-index，它就会与header重叠:

.header {
  position:fixed;
  top:0;    
  left:0;
  width:100%;
  background:darkred;
}

.modal {
  position:absolute;
  z-index:9;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:rgba(0, 0, 0, 0.53);
  width:100%;
  height:100%;
}

如果你想让模态框只覆盖屏幕的一部分，而不是全屏覆盖，你可以做同样的事情，但将覆盖更改为没有背景(这样它仍然会覆盖屏幕，但“视觉上'，而不是，因此，禁止标题被点击)。您还需要为 modal-content 设置更高的 z-index。

Demo with full screen overlay and modal

Demo with full screen overlay and small modal