Popup detras de enlace

rurouni · 1 May 2015

hola betas

quisiera empezar indicando que no soy nada experto y mi conocimiento en desarrollo web es bien basico.. la verdad nise si estoy en la division correcta... moderacion porfavor mover el tema si es necesario o indicarme para crearlo donde deba.

he visto en muchas paginas un popup oculto o como se llame, que cuando das click en un enlace se abre una pagina de publicidad, ya sea en una nueva pestaña o en una nueva ventana, luego que hago un segundo click en el enlace funciona bien... espero me haya explicado bien... es como decir aqui en forobeta hacer click en el subforo JavaScript cuando das el primer click salta la publicidad pero al segundo entras normal al subforo

alguien sabe como lograr esto ?
es algo que se logra con java script?

un abrazo

softwareweb · 1 May 2015

Este trabaja con css y html

HTML:

HTML:

<a href="#openModal">Open Modal</a>
<div id="openModal" class="modalDialog">    <div>
        <a href="#close" title="Close" class="close">X</a>
        <h2>Modal Box</h2>        <p>This is a sample modal box that can be created using the powers of CSS3.</p>        
        <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>    
</div>
</div>

CSS:

HTML:

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

Espero te sirva,

rurouni · 2 May 2015

softwareweb dijo:

Este trabaja con css y html

HTML:

HTML:

<a href="#openModal">Open Modal</a>
<div id="openModal" class="modalDialog">    <div>
        <a href="#close" title="Close" class="close">X</a>
        <h2>Modal Box</h2>        <p>This is a sample modal box that can be created using the powers of CSS3.</p>        
        <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>    
</div>
</div>

CSS:

HTML:

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

Espero te sirva,

:topsy_turvy: que idioma es ese chino ? lol no la verdad no entiendo mucho, vere si encuentro alguien que me ayude a interpretar los codigos

un abrazo y gracias

softwareweb · 2 May 2015

Te lo escribo denuevo solo es copiar y pegar se guia por id
y trabaja con html5

HTML:

<html>    <head>        <style type="text/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;    opacity:0;    -webkit-transition: opacity 400ms ease-in;    -moz-transition: opacity 400ms ease-in;    transition: opacity 400ms 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; }        </style>    </head>    <body>    <a href="#openModal">Open Modal</a>        <div id="openModal" class="modalDialog">    <div>                <a href="#close" title="Close" class="close">X</a>                <h2>Modal Box</h2>        <p>This is a sample modal box that can be created using the powers of CSS3.</p>                        <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>            </div>        </div>    </body></html>

rurouni dijo:
:topsy_turvy: que idioma es ese chino ? lol no la verdad no entiendo mucho, vere si encuentro alguien que me ayude a interpretar los codigos

un abrazo y gracias

rurouni · 3 May 2015

softwareweb dijo:
Te lo escribo denuevo solo es copiar y pegar se guia por id
y trabaja con html5

man, gracias por el codigo... la verdad no es exactamente a lo que me refiero, pero esto me dio otra idea 🙂 .... como logro simplemente ventanas emergentes / popups ?

saludos ?

Popup detras de enlace

rurouni

softwareweb

rurouni

softwareweb

rurouni

Temas similares