CODEWITHSUNDEEP
javascripthtmlcss
Zain
Zain

Reputation: 285

On click Button Pop up div should be center to screen

. .I have a button at the middle of the page. . .on click a pop up dialog box appears but. . it is centered to the top of the page but not center to the current screen at the middle of the page.. each time i have to scroll up and close the dialog box.The function which i need is where ever in the page i click the button the pop up should appear center to the current screen.Please help me out guys

#blanket {background-color:#111;opacity: 0.65;position:absolute;z-index: 9001; /*above nine thousand*/top:0px;left:0px;width:100%;}

#popUpDiv {
position:absolute;
background-color:#eeeeee;
 border:5px solid #68ad0e;
width:300px;
height:130px;
margin-top:-250px;
margin-left:-23px;
 -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
-moz-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
-webkit-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
z-index: 9002; /*above nine thousand*/}

And the html code is

<div id="blanket""></div>
<div id="popUpDiv">
<a href="javascript:void(0)" style="text-decoration: none" onclick="popup('popUpDiv')"><div align="right"><font color="green">close[X]</font>&nbsp;&nbsp;&nbsp;</div></a>
<div align="center">Please Enter Your Area Pincode</div>
</div>


<input type="button" value="pincode" onclick="popup('popUpDiv')";>

Is There any .js function that can be added to solve this problem

Upvotes: 0

Views: 8914

Answers (2)

Girish Thimmegowda
Girish Thimmegowda

Reputation: 2169

Just add margin-left:auto; and margin-right:auto; to #popupDiv.

Upvotes: 0

Thomas Wood
Thomas Wood

Reputation: 819

You need to set the top and left to 50%, then the margin to negative half height/width for the corresponding margin. Also, if you are looking to flow the element when you scroll, you need to use position: fixed; instead of using position: absolute;

#popUpDiv {
position:fixed;
top: 50%;
left: 50%;
background-color:#eeeeee;
border:5px solid #68ad0e;
width:300px;
height:130px;
margin-left:-150px;
margin-top:-65px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
-moz-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
-webkit-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
z-index: 9002; /*above nine thousand*/}

Upvotes: 6

Related Questions