Disabling back ground of the popup using angularjs without using bootstrap
<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>