使用angularjs禁用弹出窗口的后台而不使用引导
使用angularjs禁用弹出窗口的后台而不使用引导
提问于 2016-02-05 18:00:55
我希望有一个弹出和背景屏幕禁用仅使用div，ng类，ng风格和css3样式。我不想使用引导模式。我一直在努力争取这份工作。我试图显示和隐藏弹出窗口，但它所做的一切是禁用屏幕而不显示弹出窗口。下面是代码
Html代码
<div id="popupBackGround" class="popupModal-backdrop" ng-if="newUser===true" ng-style="{'display': (newUser===false || newUser===undefined) ? 'none':'block'}">
<div id="popupBackGroundDialog" class="popupModal-dialog">
<div class="popupModal-content">
<div class="popupModal-body">
<p style="margin-left: 20px;">
<strong>Is this user transferring from another Dept?</strong>
</p>
<p style="margin-left: 40px;">
<input ng-click="" name="transfer" value="Yes" type="radio"> <strong>Yes</strong>
</p>
<p style="margin-left: 40px;">
<input ng-click="" name="transfer" value="No" type="radio"> <strong>No</strong>
</p>
<p align= "center">
<button class="btn btn-primary" ng-click="ok()">OK</button>
</p>
</div>
</div>
</div>
</div>CSS码
.popupModal-dialog {
position: absolute;
width: 40%;
margin-left: 400px;
margin-right: 400px;
margin-top: -430px;
opacity: "0"
}
.popupModal-content {
position: relative;
background-color: #ffffff;
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
background-clip: padding-box;
outline: none;
}
.popupModal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000000;
display: none;
opacity: 0.5;
filter: alpha(opacity=50);
}
.popupModal-body {
position: relative;
padding: 20px;
} 如能提供任何帮助，将不胜感激。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-02-05 18:32:43
我会简化一点--你似乎有两种机制在做同样的事情(ng-if和ng-style)。
<div ng-app>
<button ng-click="showModal=1">Show modal</button>
<div id="popupBackGround" class="popupModal-backdrop" ng-if="showModal"></div>
<div id="popupBackGroundDialog" class="popupModal-dialog" ng-show="showModal">
<div class="popupModal-content">
<div class="popupModal-body">
<p style="margin-left: 20px;">{{showModal}}</p>
<p>
<button ng-click="showModal=0">Hide modal</button>
</p>
</div>
</div>
</div>
</div>演示
我也简化了你的CSS。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35230616
复制相关文章
相似问题
腾讯云开发者
