使用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禁用彈出窗口的背景而不使用引導程序

回答

相關問題