javascript - Onclick location specifics -


i need javascript/css/html. have created small dialog forms, so:

#greyout{ background-image:url('../res/greyout.png'); display:none; width:100%; height:100%; position:absolute; left:0; top:0; z-index:10; } .forms{  width:20%; position:absolute; top:20%; left:40%; right:40%; display:none; height:30%; border: 1px solid black; background-color:white; color:black; text-align:center; }

the form divs within greyout div in html. moreover, have button triggers function:

function login() {     document.getelementbyid("greyout").style.display="block";     document.getelementbyid("loginform").style.display="block"; } function signup() {     document.getelementbyid("greyout").style.display="block";     document.getelementbyid("signupform").style.display="block"; }

i want make sure when press greyed out background, dialog classed "forms" disappear greyout of page. trying make onclick event greyout div made pressing on dialog itself, trigger. need listen when user has pressed in background. in advance.

this expected event bubbles dom tree. try listen onclick on outer , inner div, if inner 1 clicked return false cancel event bubbling , keep current listener outer div.


Comments

Post a Comment

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

i make custom datepicker directive custom template. but have no idea how start building it... how include date data directive? i appreciate guide or give me advice work on more precisely. it might you! follow below steps html code sample: <label>birth date</label> <input type="text" ng-model="birthdate" date-options="dateoptions" custom-datepicker/> <hr/> <pre>birthdate = {{birthdate}}</pre> <script type="text/ng-template" id="custom-datepicker.html"> <div class="enhanced-datepicker"> <div class="proxied-field-wrap"> <input type="text" ui-date-format="yy-mm-dd" ng-model="ngmodel" ui-date="dateoptions"/> </div> <label> <button class="btn" type="button"><i class="icon-calendar"></i>
Read more

javascript - jQuery date picker - Disable dates after the selection from the first date picker -

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jquery ui datepicker - default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(function () { $("#datepicker1").datepicker(); }); </script> <script> $(function () { $("#datepicker2").datepicker(); }); </script> </head> <body> <p>date 1: <input type="text" id="datepicker1"></p> <p>date 2: <input type="t
Read more