使用angularjs禁用弹出窗口的背景而不使用引导程序

我想使用div，ng-class，ng-style和css3样式禁用弹出框和背景屏幕。我不想使用BOOTSTRAP MODAL。我一直在努力完成这项工作。我试图显示并隐藏弹出窗口，但是它的所有操作都是在不显示弹出窗口的情况下禁用屏幕。下面是代码使用angularjs禁用弹出窗口的背景而不使用引导程序

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

任何帮助，将不胜感激

来源

2016-02-05 Monish Das

为什么所有关于Bootstrap的大喊大叫？如果您需要AngularJS的帮助，请展示您的控制器。 – isherwood

道歉..并不意味着冒犯引导爱好者:-) ..我不想使用引导模式，因为我们不允许使用它，所有的在线帖子都与引导模式有关。现在控制器中没有逻辑...只根据它需要显示的值newUser，我需要显示带有停用后退组的弹出窗口。请建议，如果有一种方法来做到这一点，而不使用jQuery或JavaScript –

我回滚我的编辑，因为我可能误解了这个问题。这种情况下的“背景”是什么？模态掩码或其他页面内容？ – isherwood

我简化了一下 - 你似乎有两种机制做同样的工作（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>

Demo

我做了简化你的CSS，也。

来源

2016-02-05 18:32:43 isherwood

使用angularjs禁用弹出窗口的背景而不使用引导程序

回答

相关问题