inativo CSS » Modal

[Nano]

Modal feito com CSS e 100% customizável!

 

CSS

/* Modal */

.close {

    background-color: #00587A;

    color: white;

    border: 3px solid #00587A;

	line-height: 25px;

	position: absolute;

	right: -12px;

	text-align: center;

	top: -10px;

	width: 24px;

	text-decoration: none;

	font-weight: bold;

    -webkit-transition-duration: 0.4s;

    transition-duration: 0.4s;

}

.modalDialog:target {

	opacity:1;

	pointer-events: auto;

}



.modalDialog > div {

	width: 400px;

	position: relative;

	margin: 10% auto;

	padding: 5px 20px 13px 20px;

	border-radius:  0px;

	background: #fff;

    background-color: #008891;

    color: white;

}

.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;

	opacity:0;

	-webkit-transition: opacity 400ms ease-in;

	-moz-transition: opacity 400ms ease-in;

	transition: opacity 400ms ease-in;

	pointer-events: none;

}

HTML

 

Para abrir o modal

<a href="#openModal" class="btn">Abrir modal</a>

Conteúdo do modal

<div id="openModal" class="modalDialog">

	<div>

		<a href="#close" title="Close" class="close">X</a>

		<h2>Modal</h2>

		<p>Conteúdo do modal</p>

	</div>

</div>

Preview

http://nano-off.com.br/modal

 

Não fui eu que fiz, eu achei vagando na internet (não lembro onde eu achei). Então créditos ao nego que fez.

Editado Agosto 25, 2016 por Nano

[- Oz]

Da hora, agr só falta eu descobrir o que é isso

 

Tópicoooo RESSURGIRRRRRR

[Nano]

 

UP com o aniversariante mais maravilhoso que o mundo já viu.

[bitwelve]

Tava precisando disso.

Parabéns por postar e parabéns ao nego que fez xD

[Nano]

 

UP

[Nano]

UP

[Nano]

Up com a tag menstruada do @Cain

 

 

[lucakiksd07]

Seu tópico foi marcado como Inativo. Para reverter esta ação, entre em contato com a equipe de Moderação.

OBS: Essa mensagem é automática.