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以查看内容或模态区域。

这很好但我有问题，当用户在模态屏幕上时标题仍然可以触摸。有没有办法我可以戴上面具或什么来阻止标题区域在观看模式时可触摸。

Answer 1

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

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

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

modal-content是主要模式。包装父级是叠加层。

然后，只要您的模态具有比标题更高的z-index，它将与标题重叠：

.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%;
}

如果您希望模态仅覆盖屏幕的一部分，并且没有全屏覆盖，您可以执行相同的操作，但更改叠加层以使其没有背景（因此它仍会覆盖屏幕，但是＆＃ 39;视觉上＆＃39;而不是，因此，禁止标题被点击）。您还需要为z-index提高modal-content。

Demo with full screen overlay and modal

Demo with full screen overlay and small modal

如何使用AngularJS在我的页面上的模态下放置一个蒙版？

1 个答案: