Crear modal box con jquery y efecto fade in/out

neodani · #1 (**permalink**) 17/03/2010, 16:12

Buenas,

No he logrado crear el efecto fade in / fade out de un modal box, he leido este post de otro compañero, pero no he sabido adaptarlo
http://www.forosdelweb.com/f127/jque...de-out-743085/

El código de ejemplo que estaba utilizando es el siguiente, muy conocido...

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<title> SimpleModal Basic Modal Dialog </title>
<meta name='author' content='Eric Martin' />
<meta name='copyright' content='2010 - Eric Martin' />
 
<!-- Contact Form CSS files -->
<link type='text/css' href='css/basic.css' rel='stylesheet' media='screen' />
 
<!-- IE 6 "fixes" -->
<!--[if lt IE 7]>
<link type='text/css' href='css/basic_ie.css' rel='stylesheet' media='screen' />
<![endif]-->
 
<!-- JS files are loaded at the bottom of the page -->
</head>
<body>
<div id='basic-modal'><h2>Basic Modal Dialog</h2>
<p>A basic modal dialog with minimal styling and without any additional settings. There are a few CSS attributes set internally by SimpleModal, however, SimpleModal relies mostly on external CSS for the look and feel.</p>
<input type='button' name='basic' value='Demo' class='basic demo'/> or <a href='#' class='basic'>Demo</a>
</div>
<div id="basic-modal-content">
    <h3>Basic Modal Dialog</h3>
    <p>For this demo, SimpleModal is using this "hidden" data for its content. You can also populate the modal dialog with standard HTML or with DOM element(s).</p>
    <p>Examples:</p>
    <p><code>$('#basicModalContent').modal(); // jQuery object; this demo</code></p>
    <p><code>$.modal(document.getElementById('basicModalContent')); // DOM</code></p>
    <p><code>$.modal('&lt;p&gt;&lt;b&gt;HTML&lt;/b&gt; elements&lt;/p&gt;'); // HTML</code></p>
 
    <p><a href='http://www.ericmmartin.com/projects/simplemodal/'>More details...</a></p>
</div>
<!-- Load jQuery, SimpleModal and Basic JS files -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/basic.js'></script>
</body>
</html>

Se puede encontrar en
http://www.ericmmartin.com/projects/simplemodal-demos/
Apartado Basic Modal Dialog
Enlace de descarga directo

Qué tendría que modificar para conseguir el efecto fade in y fade out en ese modal box?

Debería modificar exclusivamente el codigo basic.js que actualmente tiene esto?

Código Javascript:

Ver originaljQuery(function ($) {
    $('#basic-modal input.basic, #basic-modal a.basic').click(function (e) {
        e.preventDefault();
        $('#basic-modal-content').modal();
    });
});

Muchas gracias de antemano!

mayid · #2 (**permalink**) 17/03/2010, 16:39

Desconocía completamente la etiqueta <code>...

Me gustaría saber si el codigo funciona, y si lo unico que necesitas es el fade.

neodani · #3 (**permalink**) 18/03/2010, 00:42

Cita:

Iniciado por mayid

Desconocía completamente la etiqueta <code>...

Me gustaría saber si el codigo funciona, y si lo unico que necesitas es el fade.

Así es mayid, el código completo funciona, cuando pulsas el boton o el enlace

<input type='button' name='basic' value='Demo' class='basic demo'/> or <a href='#' class='basic'>Demo</a>

Te abre el modal box, pero sin ningun efecto. Estuve leyendo el post anterior pero no conseguí sacarlo.

¿Sabes como hacer el efecto fade in cuando aparezca la venta y el fade out cuando desaparece?

Muchas gracias de antemano!

mayid · #4 (**permalink**) 18/03/2010, 08:10

Tendrías que abrir este archivo: js/jquery.simplemodal.js

Luego, buscar en donde diga show() y hide() y reemplazar eso por el efecto que vos queres lograr.

neodani · #5 (**permalink**) 21/03/2010, 12:54

Buenas,

Encontré un ejemplo más sencillo de implementar, funciona correctamente. Se abre el modal al pulsar el boton/enlace y no se cierra hasta que no pulsas el boton cerrar.

Quiero añadirle la funcionalidad de que si pulsan fuera del modal también se cierre igual que si pulsase el boton cerrar.

Pensaba que agregando las lineas comentadas tendría bastante, pero lo que consigo es que una vez se abre el modal se cierra automáticamente sin esperar respuesta del usuario :S

Código completo

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Modal Box With jQuery</title>
<style type="text/css">
body {
    background:#fff;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:white;
}
 
a:link, a:visited, a:active {
    background:red;
    color:white;
    text-decoration:none;
    padding:3px;
}
 
a:hover {
    background:white;
    color:red;
}
 
#darken {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:none;
    z-index:199;
    background:black;
    opacity:.5;
    filter:Alpha(opacity=50); /* Transparency in IE */
}
 
#modalBox {
    position:absolute;
    top:50%;
    left:50%;
    width:400px;
    height:300px;
    margin-left:-200px;
    margin-top:-200px;
    border:#ccc 10px solid;
    padding:10px;
    display:none;
    background:white;
    font-size:12px;
    color:black;
    z-index:200;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $('#open').click(function(){
        $('#darken').fadeIn('500');
        $('#modalBox').fadeIn('500');
    });
 
    $('#close').click(function(){
        $('#modalBox').fadeOut('500');
        $('#darken').fadeOut('500');
    });
    
    /*$("body").click(function(){
        $('#modalBox').fadeOut('500');
        $('#darken').fadeOut('500');
    });*/
 
});
</script>
</head>
 
<body>
    <a href="#" id="open">Open modalBox</a>
    <div id="modalBox">
        <p>Donec porta magna ac quam. Sed mollis. Nunc ultricies commodo neque. Aliquam dapibus. Nulla gravida interdum tortor. In arcu. Pellentesque eu quam. Donec aliquam iaculis urna. Maecenas vel orci quis arcu vulputate cursus. Quisque lectus. Fusce ultricies orci at quam. Sed ut augue. </p>
        <img src="http://path/to/some/image.jpg" alt="some image" />
        <p><a href="#" id="close">Close modalBox</a></p>
    </div><!-- end modalBox -->
    <div id="darken"></div><!-- end darken -->
</body>
 
</html>

¿Sabéis que me falta para conseguirlo?

Muchas gracias de antemano!

mayid · #6 (**permalink**) 21/03/2010, 12:58

Creo que en ese caso tendrías que usar el selector [not]. Pero no sabría como implementarlo.

En pseudo codigo:

- cuando hagas click en cualquier lugar que no sea el box (:not), cerrá la ventana.

neodani · #7 (**permalink**) 21/03/2010, 13:18

Cita:

Iniciado por mayid

Creo que en ese caso tendrías que usar el selector [not]. Pero no sabría como implementarlo.

En pseudo codigo:

- cuando hagas click en cualquier lugar que no sea el box (:not), cerrá la ventana.

Y si te doy una idea... como por ejemplo que al mostrar la ventana modal apareciese una capa de background de toda la ventana que al pulsar en ella provocase el efecto de cerrarse?

Es factible? sabrías sacarlo así? :D

Mil gracias mayid, ya te debo un par de cervezas!

mayid · #8 (**permalink**) 21/03/2010, 16:19

Bueno, para empezar veamos esto:
http://www.forosdelweb.com/f127/nega...jquery-781392/

Ahí hay un codigo que publicó Dany para utilizar :not

neodani · #9 (**permalink**) 22/03/2010, 13:48

Cita:

Iniciado por mayid

Bueno, para empezar veamos esto:
http://www.forosdelweb.com/f127/nega...jquery-781392/

Ahí hay un codigo que publicó Dany para utilizar :not

Buenas,

La primera duda que me sale al ver el ejemplo, es si el código tiene que ir obligatoriamente abajo de la página :S

Luego lo he probado de distintas maneras pero cuando abre la ventana se desaparece, no espera a que haga click, cosa que me desconcierta porque tengo puesto el evento click

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Modal Box With jQuery</title>
<style type="text/css">
body {
    background:#fff;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:white;
}
 
a:link, a:visited, a:active {
    background:red;
    color:white;
    text-decoration:none;
    padding:3px;
}
 
a:hover {
    background:white;
    color:red;
}
 
#darken {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:none;
    z-index:199;
    background:black;
    opacity:.5;
    filter:Alpha(opacity=50); /* Transparency in IE */
}
 
#modalBox {
    position:absolute;
    top:50%;
    left:50%;
    width:400px;
    height:300px;
    margin-left:-200px;
    margin-top:-200px;
    border:#ccc 10px solid;
    padding:10px;
    display:none;
    background:white;
    font-size:12px;
    color:black;
    z-index:200;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $('#open').click(function(){
        $('#darken').fadeIn('500');
        $('#modalBox').fadeIn('500');
    });
 
    $('#close').click(function(){
        $('#modalBox').fadeOut('500');
        $('#darken').fadeOut('500');
    });
 
});
</script>
</head>
 
<body>
    <a href="#" id="open">Open modalBox</a>
    <div id="modalBox">
        <p>Donec porta magna ac quam. Sed mollis. Nunc ultricies commodo neque. Aliquam dapibus. Nulla gravida interdum tortor. In arcu. Pellentesque eu quam. Donec aliquam iaculis urna. Maecenas vel orci quis arcu vulputate cursus. Quisque lectus. Fusce ultricies orci at quam. Sed ut augue. </p>
        <img src="http://path/to/some/image.jpg" alt="some image" />
        <p><a href="#" id="close">Close modalBox</a></p>
    </div><!-- end modalBox -->
    <div id="darken"></div><!-- end darken -->
<script>
  $(":not(#modalBox)").click(function(){
        $('#modalBox').fadeOut('500');
        $('#darken').fadeOut('500');
    });
</script>
</body>

Necesito una mano con la propiedad :not

Muchas gracias!

mayid · #10 (**permalink**) 22/03/2010, 14:25

Cita:

$(":not(#modalBox)").click(function(){
$('#modalBox').fadeOut('500');
$('#darken').fadeOut('500');
});

Esto debe ir dentro de document.ready, junto con las demas asignaciones de click.

neodani · #11 (**permalink**) 22/03/2010, 14:35

Cita:

Iniciado por mayid

Esto debe ir dentro de document.ready, junto con las demas asignaciones de click.

Lo probé como me indicaste pero no funcionó :S me sucedia el mismo efecto, se abría y se cerraba al instante.

Encontré una manera alternativa

$('#darken').click(function () {
$('#darken').fadeOut('500');
$('#modalBox').fadeOut('500');
});

Dejo el código completo por si alguien lo quiere usar en FF va bien...

Sin embargo, un detalle, cuando lo abro con IE me muestra el fondo totalmente negro!! no hace la transparencia. ¿Por qué ocurre?

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Modal Box With jQuery</title>
<style type="text/css">
body {
    background:#fff;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:white;
}
 
a:link, a:visited, a:active {
    background:red;
    color:white;
    text-decoration:none;
    padding:3px;
}
 
a:hover {
    background:white;
    color:red;
}
 
#darken {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:none;
    z-index:199;
    background:black;
    opacity:.5;
    filter:Alpha(opacity=50); /* Transparency in IE */
}
 
#modalBox {
    position:absolute;
    top:50%;
    left:50%;
    width:400px;
    height:300px;
    margin-left:-200px;
    margin-top:-200px;
    border:#ccc 10px solid;
    padding:10px;
    display:none;
    background:white;
    font-size:12px;
    color:black;
    z-index:200;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $('#open').click(function(){
        $('#darken').fadeIn('500');
        $('#modalBox').fadeIn('500');
    });
 
    $('#close').click(function(){
        $('#modalBox').fadeOut('500');
        $('#darken').fadeOut('500');
    });
    
    $('#darken').click(function () {
        $('#darken').fadeOut('500');
        $('#modalBox').fadeOut('500');
    });
});
</script>
</head>
 
<body>
    <a href="#" id="open">Open modalBox</a>
    <div id="modalBox">
        <p>Donec porta magna ac quam. Sed mollis. Nunc ultricies commodo neque. Aliquam dapibus. Nulla gravida interdum tortor. In arcu. Pellentesque eu quam. Donec aliquam iaculis urna. Maecenas vel orci quis arcu vulputate cursus. Quisque lectus. Fusce ultricies orci at quam. Sed ut augue. </p>
        <img src="http://path/to/some/image.jpg" alt="some image" />
        <p><a href="#" id="close">Close modalBox</a></p>
    </div><!-- end modalBox -->
    <div id="darken"></div><!-- end darken -->
</body>
 
</html>

Muchas gracias de antemano!

mayid · #12 (**permalink**) 22/03/2010, 15:14

Cita:

$('#darken').fadeIn('500');
$('#modalBox').fadeIn('500');

Modal box no hace la transparencia por si mismo? Ah! No estas usando un plugin sino algo que vos compusiste. Ya veo.

neodani · #13 (**permalink**) 22/03/2010, 15:26

Cita:

Iniciado por mayid

Modal box no hace la transparencia por si mismo? Ah! No estas usando un plugin sino algo que vos compusiste. Ya veo.

Es muy dificil conseguirlo sin plugins externos? es que todos los que he visto ocupan bastante, y para el efecto que es pensaba que con pocas lineas y vuestra ayuda podría conseguirlo...

Se te ocurre cómo mayid? qué le falta para que funcione bien en IE?

Muchas gracias

mayid · #14 (**permalink**) 22/03/2010, 15:51

FadaIn / out sirven para ir de nada a todo y viceversa. Si lo que queres es transparencia, juga con la opacidad:

$('#book').fadeTo('slow', 0.5)

FadeTo: http://api.jquery.com/fadeTo/

(los valores van de 0 a 1).

neodani · #15 (**permalink**) 23/03/2010, 00:41

Cita:

Iniciado por mayid

FadaIn / out sirven para ir de nada a todo y viceversa. Si lo que queres es transparencia, juga con la opacidad:

$('#book').fadeTo('slow', 0.5)

FadeTo: http://api.jquery.com/fadeTo/

(los valores van de 0 a 1).

No lo consigo en FF funciona en IE no.

<script type="text/javascript">
$(function(){
$('#open').click(function(){
$('#darken').fadeIn('500');
$('#modalBox').fadeIn('500');
});

$('#close').click(function(){
$('#modalBox').fadeOut('500');
$('#darken').fadeOut('500');
});

$('#darken').click(function () {
$('#darken').fadeOut('500');
$('#modalBox').fadeOut('500');
$('#modalBox').fadeTo('slow', 0.5);
});
});
</script>

Me echáis una manita?

Gracias de antemano

neodani · #16 (**permalink**) 23/03/2010, 12:28

He conseguido rescatar el código de un compañero del foro deirdre, que hace con jquery lo que buscábamos, y funciona tanto en IE como en FF. Muchas gracias deirdre.

http://www.forosdelweb.com/f77/conse...howbox-734261/

El código adaptado al ejemplo que os quiero mostrar es el siguiente:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Popup suave</title>
    <link rel="stylesheet" href="css/estilo.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
 
<script type="text/javascript"> 
    var popupStatus = 0;
    function loadPopup() {
    if (popupStatus == 0) {
        $("#backgroundPopup").css({
            "opacity": "0.7"
        });
        $("#backgroundPopup").fadeIn("slow");
        $("#popupContact").fadeIn("slow");
        popupStatus = 1;
    }
};
 
function disablePopup() {
    if (popupStatus == 1) {
        $("#backgroundPopup").fadeOut("slow");
        $("#popupContact").fadeOut("slow");
        popupStatus = 0;
    }
};
 
function centerPopup() {
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#popupContact").height();
    var popupWidth = $("#popupContact").width();
    $("#popupContact").css({
        "position": "absolute",
        "top": windowHeight / 2 - popupHeight / 2,
        //"top": 10,
        "left": windowWidth / 2 - popupWidth / 2
    });
    $("#backgroundPopup").css({
        "height": windowHeight
    });
};
$(document).ready(function () {
    $("#button").click(function () {
        centerPopup();
        loadPopup();
    });
    $("#popupContactClose").click(function () {
        disablePopup();
    });
    $("#backgroundPopup").click(function () {
        disablePopup();
    });
    $(document).keypress(function (e) {
        if (e.keyCode == 27 && popupStatus == 1) {
            disablePopup();
        }
    });
});
</script>
</head>
<body>
    <div id="cab">
        <p>Linea 1</p><br/><p>Linea 2</p><br/><p>Linea 3</p><br/><p>Linea 4</p><br/><p>Linea 5</p><br/><p>Linea 6</p><br/><p>Linea 7</p><br/><p>Linea 8</p><br/><p>Linea 9</p><br/><p>Linea 10</p><br/>
        <p>Linea 1</p><br/><p>Linea 2</p><br/><p>Linea 3</p><br/><p>Linea 4</p><br/><p>Linea 5</p><br/><p>Linea 6</p><br/><p>Linea 7</p><br/><p>Linea 8</p><br/><p>Linea 9</p><br/><p>Linea 10</p><br/>
        <p>Linea 1</p><br/><p>Linea 2</p><br/><p>Linea 3</p><br/><p>Linea 4</p><br/><p>Linea 5</p><br/><p>Linea 6</p><br/><p>Linea 7</p><br/><p>Linea 8</p><br/><p>Linea 9</p><br/><p>Linea 10</p><br/>
        <p>Linea 1</p><br/><p>Linea 2</p><br/><p>Linea 3</p><br/><p>Linea 4</p><br/><p>Linea 5</p><br/><p>Linea 6</p><br/><p>Linea 7</p><br/><p>Linea 8</p><br/><p>Linea 9</p><br/><p>Linea 10</p><br/>
        
        <div id="button">ABRIR MODAL BOX</div>
    </div>
    
    <div id="popupContact">
        <a id="popupContactClose">x</a>
        <h1>Contacto</h1>
        <p>Envíenos su opinión, la tendremos en cuenta. Gracias</p>
        <div id="main_content_single">
        <form method="post" action="contact.php">
                <label>Nombre:</label>
                <input class="textfield" type="text" name="nombre" maxlength="64" value="" />
                <label>E-mail:</label>
                <input class="textfield" type="text" name="email" maxlength="64" value="" />
                <label>Mensaje:</label>
                <textarea class="textarea" name="opinion" rows="8"></textarea>
            <button type="submit" class="button">ENVIAR</button>
        </form>
        </div>
    </div>
    <div id="backgroundPopup"></div>
    <p>Deirdre para Foros del Web</p>
</body>
</html>

Estilo css

Código CSS:

Ver original/* reset */
 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
    border: 0pt none;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
 
/* fin reset */
 
body {
    background: #fff none repeat scroll 0%;
    line-height: 1;
    font-size: 12px;
    font-family: arial,sans-serif;
    margin: 0;
    height: 100%;
}
a {
    cursor: pointer;
    text-decoration:none;
}
br.both{
    clear:both;
}
#backgroundPopup{
    display: none;
    position: fixed;
    _position: absolute; /* necesario para internet explorer 6 */
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #ccc;
    border: 1px solid #cecece;
    z-index: 1;
}
#popupContact{
    display: none;
    position: fixed;
    _position: absolute; /* necesario para internet explorer 6*/
    width: 420px;
    height: 370px;
    background: #FFFFFF;
    border: 12px solid #cecece;
    z-index: 2;
    padding: 12px;
    font-size: 13px;
}
#popupContact h1{
    text-align: left;
    color: #800000;
    font-size: 22px;
    font-weight: 700;
    border-bottom: 1px solid #D3D3D3;
    padding-bottom: 2px;
    margin-bottom: 20px;
}
#popupContactClose {
    font-size: 14px;
    line-height: 14px;
    right: 6px;
    top: 4px;
    position: absolute;
    color: #800000;
    font-weight: 700;
    display: block;
}
.button{
    text-align: center;
    font-size: 11px;
}
#button{
    text-align: center;
    font-size: 13px;
    cursor: pointer;
    width: 100px;
    margin: 0 auto;
    margin-top: 10px;
}
.textfield {
    margin-bottom: 15px;
    background-color: #ccc;
    color: #484848;
    border: 1px solid #383838;
    padding: 4px 3px;
    font-size: 0.9em;
    width: 360px;
}
#main_content_single {
    font-size: 1.0em;
    color: #484848;
    margin: 5px 40px 5px 0;
    line-height: 1.5em;
}
.textarea {
    width: 360px;
    font-family: Arial, Verdana, Tahoma, Geneva, sans-serif;
    font-size: 0.9em;
    background-color: #ccc;
    color: #484848;
    border: 1px solid #383838;
    padding: 4px 3px;   
}
#grafico {
    width: 200px;
    height: 200px;
    background-image:url('../image/noentiendo.png');
    border-bottom: 2px solid #484848;
    margin: 0 auto;
}
#cab {
    width: 100%;
    text-align: center;
    margin-top: 20px;
}

El problema es que no centra la ventana MODAL en mitad de la pantalla, sino que cuenta al parecer los pixels de la ventana del navegador y lo ajusta a ese tamaño. Esto es un problema porque si el tamaño real de la página es mas largo, cuando se abre la ventana queda arriba del todo.

¿Alguna idea?

Muchas gracias de antemano!

neodani · #17 (**permalink**) 23/03/2010, 12:53

Cita:

Iniciado por neodani

El problema es que no centra la ventana MODAL en mitad de la pantalla, sino que cuenta al parecer los pixels de la ventana del navegador y lo ajusta a ese tamaño. Esto es un problema porque si el tamaño real de la página es mas largo, cuando se abre la ventana queda arriba del todo.

¿Alguna idea?

No es fácil al tratarse de una ventana modal que aparece por encima del resto de elementos. Las técnicas habituales no funcionan :S:S

Código CSS:

Ver originaltop: 50%; /*Lo colocamos al 50% de la pantalla en vertical*/
left: 50%; /*Lo colocamos al 50% de la pantalla en horizontal*/
margin-top: -185px; /*le restamos la mitad del valor de height para centrarla*/
margin-left: -210px; /*le restamos la mitad del valor de width para centrarla*

mayid · #18 (**permalink**) 23/03/2010, 13:04

Cita:

$("#backgroundPopup").css({
"opacity": "0.7"
});

Mira vos, una alternativa al fadeTo().

Cita:

$("#popupContact").css({
"position": "absolute",
"top": windowHeight / 2 - popupHeight / 2,
//"top": 10,
"left": windowWidth / 2 - popupWidth / 2
});

Aca esta presente la ecuación que vos planteabas en CSS. No? Que falta ajustar ahora? El alto o el ancho?

neodani · #19 (**permalink**) 23/03/2010, 13:18

Conseguido

Se tiene que modificar del css anterior esta propiedad

Código CSS:

Ver original#popupContact{
    display: none;
    position: fixed;
    _position: fixed; /* necesario para internet explorer 6*/
    width: 420px;
    height: 370px;
    margin-top: -195px;
    margin-left: -210px;
    top: 50&#37;;
    left: 50%;
    background: #FFFFFF;
    border: 12px solid #cecece;
    z-index: 2;
    padding: 12px;
    font-size: 13px;
}

Podemos eliminar la función, ya que se realiza desde el css

Código Javascript:

Ver originalfunction centerPopup() {
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#popupContact").height();
    var popupWidth = $("#popupContact").width();
    /*$("#popupContact").css({
        "position": "fixed",
        "top": windowHeight / 2 - popupHeight / 2,
        "left": windowWidth / 2 - popupWidth / 2
    });*/
    $("#backgroundPopup").css({
        "height": windowHeight
    });
};

Ojo con la linea donde se llama
centerPopup();

Lo que falta ahora mayid, es disponer de dos botones distintos, y que los dos abrán una pop-up distinta. Reutilizando el código... a ver de que manera, porque no lo veo.

Es posible que tengamos que definir una especie de función a la cual se le pase el ID de la modal que queremos abrir?

Casi lo tenemos :P

Saludos!

duotono-tg · #20 (**permalink**) 16/03/2012, 05:17

Hola muy bueno el tutolo estoy probando pero se me abre detrás de los divs. Es incompatible con otro jquery que tengo instalado como el pretyfoto?