Question

我有这段代码：

<body>
    <div>
      xxx
    </div>
    <div id="error"
         ng-show="er.msg">
        <div style="color: white; background-color: purple; height: 2rem; display: flex; align-items: center;">
            <div style="width: 90%; margin-right: auto; margin-left: auto;">{{ er.msg  }} </div>
        </div>
    </div>   
    <div>
      xxx
    </div>  
</body>

有没有办法在整个页面上显示一个掩码，以防止在显示错误对话框时输入用户？请注意这是有角度的，所以我可以用ng-show =“er.msg”制作一个div节目，或者我可以用ng-show =“！er.msg”隐藏一个div。

Answer 1

如果您查看bootstrap modal实施，您可以轻松实现这一目标。

您将主要需要3个css类

//要用透明窗口覆盖整个页面，单击此按钮应关闭模态窗口。

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
  opacity: 0.5;
}

//透明窗口上方的实际模态窗口，具有更高的z-index

.modal {
  overflow: auto;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
}

//这是附加到body标签以删除滚动条，以防止双滚动条。关闭对话框时，应删除此类。

.modal-open {
  overflow: hidden;
}

如何使用AngularJS创建模态消息框？

1 个答案: