Jump to content

Question/Help regarding a DIV and Google Maps


mark110384

Recommended Posts

Is there any way that u can set a google map to transparent like what you would use for Flash wmode. My aim is to allow the user to select a log in opition this then open a hidden DIV that expands to fill the whole browser with a log in box centered, however the google maps API looks as though it is layered above the hidden div? Thanks

Link to comment
Share on other sites

Not sure if this would work, but how about:

 

Put the following just below the <BODY> tag:

 

<div id='LoginPage'>

       <div id='LoginText'>
       Stick the form code in here and all the associated blurb.
       </div>
     </div>

 

Use the following css code:

#LoginPage {
position: absolute;
z-index: 100;
background-color: #000;
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
top: 0%;
left: 0;
height: 100%;
width: 100%;
text-align: center;
line-height: 0;
display: none;
}

#LoginText {
 position: relative;
 font-family: Verdana, Arial;
 font-size: 12px;
 top: 50%;
 color: #fff;
  text-align: center;  
}

 

Then, edit the login link to be:

 

<a href="#" onclick="document.getElementById('LoginPage').style.display = 'block';">Login Link</a>

 

 

The above will cause the entire page to go an opaque black colour and have the login content in the middle of the window.

 

I'm no Javascript expert but this works on a simple HTML page, obviously you will need to try it and modify it to suit your needs.

 

Hope it helps.

 

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.