Jump to content

[Resolvido] Popup CSS/HTML


pac@crn
 Share

Recommended Posts

so tens que fazer o inverso do que fazes para o mostrar!

se para mostrar, mudas o visibility e/ou o display, para visible e block, respetivamente, para fechar fazes o contrario:

mudas o visibility/display para respetivamente hidden/none

sem codigo nao poderemos ser + especificos...

B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net
Link to comment
Share on other sites

Código css:

.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
-webkit-transition: opacity 300ms ease-in;
-moz-transition: opacity 300ms ease-in;
transition: opacity 300ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }

Código html:

<a href="#openModal">New application</a>
<div id="openModal" class="modalDialog">
 <div>
	 <a href="#close" title="Close" class="close">X</a>
	 <h2>New Application</h2>
	 <p>
		 Name:<form> <input name='name' size='20' type='text'></form>

	 </p>
 </div>
</div>

Consegui resolver. Adicionei na classe .modalDialog

opacity: 0;
Edited by pac@crn
Link to comment
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
 Share

×
×
  • 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.