title: Disabling back ground of the popup using angularjs without using bootstrap
body: <p>I want to have a popup and the background screen disabled using only divs, ng-class, ng-style and css3 styles. I DO NOT WANT TO USE BOOTSTRAP MODAL. I have been struggling to get this work. I am trying to show and hide the popup but all its doing is disabling the screen without displaying the popup. Below is the code </p>
  
  <p>Html code</p>
  
  <pre><code>&lt;div id="popupBackGround" class="popupModal-backdrop" ng-if="newUser===true" ng-style="{'display': (newUser===false || newUser===undefined) ? 'none':'block'}"&gt;
  &lt;div id="popupBackGroundDialog" class="popupModal-dialog"&gt;
      &lt;div class="popupModal-content"&gt;
          &lt;div class="popupModal-body"&gt;
             &lt;p style="margin-left: 20px;"&gt;
                              &lt;strong&gt;Is this user transferring from another Dept?&lt;/strong&gt;
             &lt;/p&gt;
             &lt;p style="margin-left: 40px;"&gt;
                  &lt;input ng-click="" name="transfer" value="Yes" type="radio"&gt; &lt;strong&gt;Yes&lt;/strong&gt;
             &lt;/p&gt; 
             &lt;p style="margin-left: 40px;"&gt;
                  &lt;input ng-click="" name="transfer"  value="No" type="radio"&gt; &lt;strong&gt;No&lt;/strong&gt;
            &lt;/p&gt;
            &lt;p align= "center"&gt;
            &lt;button class="btn btn-primary" ng-click="ok()"&gt;OK&lt;/button&gt;
            &lt;/p&gt;
          &lt;/div&gt;                          
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS code</p>
  
  <pre><code>.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;
  } 
  </code></pre>
  
  <p>Any help would be appreciated</p>