PDA

View Full Version : How to make modal login box fixed unmoved ?



Wei Hong
June 23, 2014, 09:12 AM
Dear Flynax Developers,

How do I make the login box in my flynax site fixed just the way it does in flynax home page. Please refer to picture 1 and 2

1026
In picture 1 above is when i first click on the "Customer Login" on the top left of flynax home page, the box appear in the middle of the screen.

1027
In Picture 2 above, I can scroll the page down and the box maintain in the same position, fixed. That is why the box is now appear at top because i scrolled the page down

1028
In picture 3 above, when i clicked login the box appear at the middle similar to flynax home page.

1029
However, in picture 4 above, as I scroll down, the box move as i scroll.

How do I make the login box fixed at the top, similar to flynax hompage login, and not moving around when i scroll?
I have tried around and I think the code is in style.css, in this part:


/* modal window */
#modal_mask
{
background: rgba(0,0,0,0.45);
background: url('../img/blank0.4.png') 0 0 repeat\9;
/*filter: alpha(opacity=40);
-moz-opacity: 0.45;
opacity: 0.45;*/
position: absolute;
top: 0;
left: 0;
z-index: 1000;
}
.modal_block
{
position: absolute;
z-index: 1001;
left: 50%;
margin-left: -176px;
width: 340px;
height: 230px;
background: url('../img/modal_bg.jpg') left top repeat #d0d0d0;

-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 0px;

-moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
}
.modal_block div.inner div.close
{
position: absolute;
top: 0;
right: 0;
width: 31px;
height: 31px;
background: url('../img/gallery.png') 0 -607px no-repeat;
cursor: pointer;
}


But I don't know how to make the change.
Please advice

Thank you and have a good day