Jump to content
A.Brayan

Como alterar o display de divs com Javascript?

Recommended Posts

A.Brayan

Olá e bom dia a todos, gostaria de saber como se  faz para que ao clicar no botão, a propriedade display das div's overlay e  overlay_content possam alterar para block, mostrando assim uma popup do estilo CSS, aqui está o código e o CSS:

Código:

<div id="overlay" style="display:none; ">
     <div id="overlay_content" style="display:none; " style="top: 40px; ">
          <a HREF="#" onClick=""><img src="Images\Photoshop ones\exit cross 2.png" id="popup_cmdclose"></a> <!-- imagem para fechar a popup -->
<form>
      <div id="form1">
	( … )
</form>
     </div>
</div>
    <form>
<INPUT TYPE="button" value="Abrir uma CSS popup" onClick="">
    </form>

CSS:

#overlay { display: none; 
position: absolute; 
width: 100%; height: 100%;
z-index: 1; 
top: 0px; left: 0px; 
background-color: transparent; }

#overlay_content { z-index: 3; 
	width: 511px; 
	margin-left: auto; margin-right: auto; 
	background-color: transparent; 
	position: relative; 
	top: 40px; 
	background-image: url('Images/Photoshop ones/Head_PoP_full6.png'); 
	background-position: center top;
	background-repeat: no-repeat; 
	padding-top: 69px; 
	min-height: 300px; height: auto !important; height: 300px; }

Ficarei muito agradecido se me poderem responder.

Share this post


Link to post
Share on other sites
taviroquai

O mais fiavel é com uma framework js jQuery... http://api.jquery.com/toggle/

Á la pata...

<script type="text/javascript">
function togglePopup() {
    if (document.getElementById('overlay').style.display == 'block') {
        document.getElementById('overlay').style.display = 'none';
        document.getElementById('overlay_content').style.display = 'none';
    else {
        document.getElementById('overlay').style.display = 'block';
        document.getElementById('overlay_content').style.display = 'block';
    }
}
</script>

<INPUT TYPE="button" value="Abrir uma CSS popup" onClick="togglePopup();">

Ainda falta no link da imagem para fecjhar...

<a HREF="javascript: togglePopup();"><img src="Images\Photoshop ones\exit cross 2.png" id="popup_cmdclose"></a>

Share this post


Link to post
Share on other sites
A.Brayan

Woooow, you are the man, muito obrigado mesmo, só deu um erro de sintaxe porque faltava uma "}", mas isso não tem importancia, muito obrigado mesmo, tenha um resto de semana abençoado  :P

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. 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.