css3 - Disabling back ground of the popup using angularjs without using bootstrap -


i want have popup , background screen disabled using divs, ng-class, ng-style , css3 styles. not want use bootstrap modal. have been struggling work. trying show , hide popup doing disabling screen without displaying popup. below code

html code

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

any appreciated

i'd simplify bit--you seem have 2 mechanisms doing same job (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

i did simplify css, also.


Comments

Post a Comment

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

Image
i have script tag in code, keyboard shortcut comment/uncomment script tag in sublime. after selecting script open , close tag. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script> i pressing ctrl + shift + / , getting this /*<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>*/ also pressed ctrl + / , got this // <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> // </script> instead of <!-- <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script> --> script open , close tag in 2 lines not in 1 line , not have spaces too. for mac,high light lines want comment. hold 'command , / ' commented. for windows: high line or select lines ,then hold ctrl + / if not work: ...
Read more

post - imageshack API cURL -

i credentials correct. when send image through form this:(action="http://api.imageshack.com/v2/images/"). working fine when tried send $ch = curl_init($url); failed. code: enter code here <form action="" method="post" enctype="multipart/form-data"> select image upload: <input type="file" name="file" id="file" multiple> <input type="text" name="auth_token" id="auth_token" value="xxxxxxxxxxxxxxxx"> <input type="text" name="api_key" id="api_key" value="xxxxxxxxxxxxxxx"> <input type="submit" value="upload image" > </form> $url = ' http://api.imageshack.com/v2/images/ '; $temp = $_files["file"]['tmp_name']; echo $temp."<br>" ; $ch = curl_init($url); curl_setopt($ch, curlopt_post, true); curl...
Read more

dataset - MPAndroidchart returning no chart Data available -

i having problems mpandroidchart. adding temperature , humidity data chart, displays "no chart data available". here can see bug is? super grateful! //create data //set size of data int size = list.size(); if (size > 24){ size = 24;} //create lists form temp , hum arraylist<entry> temps = new arraylist<entry>(); arraylist<entry> hums = new arraylist<entry>(); //fill list temp values (int = 0; < size; i++){ entry value = new entry(math.round(list.get(list.size()-size + i).temp), (size-i)); temps.add(value); } //fill list hum values (int = 0; < size; i++){ entry value = new entry(math.round(list.get(list.size()-size + i).hum), (size-i)); hums.add(value); } ...
Read more