Como se llama esto??

DarkSoquet · #1 (**permalink**) 27/05/2015, 17:04

Buenos días/tardes/noches, tengo una duda, me han pedido para una pagina web una pantalla "pre-Inicio" que contenga un botón entrar, pero nunca hice algo asi, y no se como se llama, creo q es tipo pop-up pero la verdad ni idea, les dejo una imagen de lo que me refiero

fíjense que el "pre-inicio" al que me refiero aparece como delante del contenido de la pagina principal, y el contenido de la pagina principal se oscurece.

TIExpert · #2 (**permalink**) 27/05/2015, 19:03

Hola.

Se conocen con el nombre de ventanas modales. Al menos eso creo yo.

Si usas Bootstrap te será facil hacerlas.

Saludos

superweb360 · #3 (**permalink**) 27/05/2015, 19:17

Aquí tienes un listado de 17 ventanas modales

http://www.sitepoint.com/14-jquery-modal-dialog-boxes/

fede5426 · #4 (**permalink**) 27/05/2015, 19:41

Te dejo un ejemplo sin tantos estilos, quizás así puedas entender más o menos como hacerlo con tu propio código.

Código HTML:

Ver original<div class="modal">
    <div class="ventana">
        <button class="cerrar">Cerrar</button>
        <img src="http://dummyimage.com/300x300/012345/ccc" alt="" />
    </div>
</div>

Código CSS:

Ver originalbody{
    background-image:url("http://oi59.tinypic.com/bgafkz.jpg");
    background-size:100%;
    background-repeat:no-repeat;
}
 
.modal{
    width:100%;
    height:100%;
    position:absolute; 
    top:0;
    left:0;
    background-color:rgba(0,0,0,.6)
}
 
.ventana{
    width:300px;
    height:300px;
    padding:1em;
    background-color:#ccc;
    position:absolute;
    top:20%;
    left:-150px;
    margin-left:50%;
}
 
.cerrar{
    position:absolute;
    bottom:2em;
    right:2em;
    cursor:pointer;
    }

Código Javascript:

Ver original$(document).ready(function(){
    
    $(".cerrar").click(function(){
        
     $(".modal").fadeOut(300);
        
    })
    
});

http://codepen.io/fede5426/pen/mJOYBG

En ese ejemplo use una imagen de fondo en el body para simular el sitio que esta por detrás de la ventana modal.

* El div con clase "modal" es la pantalla negra.
* El div con clase "ventana" es, lógicamente, la ventana donde va a ir el contenido. Dentro de ese div deberías poner todo lo que quieras que contenga la ventana, textos, imágenes, un formulario, lo que quieras. Y a demás un botón para cerrarlo.

Así como está el código del ejemplo, al entrar al sitio te encontrarías con esa ventana.. si quisieras que aparezca por ejemplo presionando un botón, habría que modificar un poco ese código. También se puede hacer que clickeando cualquier parte de la pantalla, la ventana se cierre.

Si hay algo que no entiendas, pregunta

Saludos

DarkSoquet · #5 (**permalink**) 28/05/2015, 09:47

Gracias a todos por contestar, fede5426 la verdad me facilitaste mucho las cosas

estuve probando tu código, y es perfecto, ya le hice las modificaciones para que quede a mi gusto, pero tengo 2 problemas,1 es que al apretar el botón de "cerrar" no ocurre nada, no me cierra el modal y el segundo problema es que, la pagina que se encuentra "debajo" del modal, tiene un slideshow, el cual al iniciarse la pagina con el modal las imágenes aparecen arriba del modal, alguna idea a que se debe esto?

fede5426 · #6 (**permalink**) 28/05/2015, 10:51

Habría que ver como quedó el código que modificaste para ver por que no se cierra con el botón.

Lo de la superposición de imágenes se arregla con z-index, asignale un numero mayor al modal para que se posicione por sobre los demás elementos con posición absoluta.

Dejá tu código en este post, o si tenes alguna muestra online también sirve.

DarkSoquet · #7 (**permalink**) 29/05/2015, 09:49

Código HTML:

Ver original<body>
<section id="wrap"><!--centra el sitio web -->
    
        <section id="main"> 
        <div class="modal">
                <div class="ventana">
                    <button class="entrar">Cerrar</button>
                </div>
            </div>
                    <script>
                            
                        $(document).ready(function () {
                            $('.cerrar').click(function () {
                                $('.modal').fadeOut(300);
                            });
                        });
                        //@ sourceURL=pen.js
 
                    </script>
</section>
</section>
</body>

Código CSS:

Ver original.modal{
    width:100%;
    height:100%;
    position:absolute; 
    top:0;
    left:0;
    background-color:rgba(0,0,0,.6)
}
 
.ventana{
    width:600px;
    height:600px;
    padding:1em;
    background-color:#ccc;
    position:absolute;
    top:90%;
    left:-150px;
    margin-left:50%;
}
 
.entrar{
    position:absolute;
    bottom:2em;
    right:2em;
    cursor:pointer;
    }

así como esta, es casi idéntico al tuyo, y no me funciona cuando quiero cerrarlo, para mi estoy ubicando mal algo en el html, y otra consulta, porque el sombreado solo me aparece en forma vertical el 50% de la pagina?

fede5426 · #8 (**permalink**) 29/05/2015, 11:30

Hay algunos problemitas en ese código

El primero, no cierra porque cambiaste la clase del botón "cerrar" por "entrar". Cuando ejecutas la función de jquery indicas que cuando se haga click en el elemento con clase "cerrar", se cierre el modal, al cambiar la clase obviamente deja de funcionar. Dos opciones para solucionarlo, volver a cambiar la clase en html y dejarlo como estaba, o cambiar el código jquery.

El sombreado aparece al 100% de la altura del navegador, si la ventana de tu modal genera un scroll, la sombra se corta (Estas usando mas del 100% del alto). Esto pasa porque tu ventana tiene un top de 90%.. le estas indicando que se posicione 90% debajo del borde superior del navegador, lo que hace que genere un scroll. Usa top: 10%.

Otro problema, el centrado. Para que que la ventana quede centrada en el navegador sin importar el ancho del dispositivo, se usa un margin-left del 50% y el left debe tener la mitad del valor del width de dicha ventana y en negativo. Es decir, si tu ventana tiene un width de 600px, el left debe ser de -300px. En mi ejemplo era de -150 porque la ventana principal ocupaba 300px.

Probá haciendo esas modificaciones.

Saludos

DarkSoquet · #9 (**permalink**) 01/06/2015, 16:54

hice los cambios que me indicaste, y sigue estando todo igual, menos lo del centrado que lo había modificado yo a propósito para poder presionar el botón de cerrar, lo del z-index ya lo acomode, pero sigue sin cerrarse el modal al presionar el botón y sigue sin cubrir el total de la pagina.

Gracias de ante mano por TODA la ayuda que me estas dando.

fede5426 · #10 (**permalink**) 01/06/2015, 18:36

Yo hice esos cambios en el código que pasaste y funciona perfecto..

Usalo asi:

Código HTML:

Ver original<body>
<section id="wrap"><!--centra el sitio web -->
    <section id="main"> 
        <div class="modal">
                         <div class="ventana">
                 <button class="cerrar">Cerrar</button>
                        </div>
                </div>
    </section>
</section>
</body>

Código CSS:

Ver original.modal{
    width:100%;
    height:100%;
    position:absolute; 
    top:0;
    left:0;
    background-color:rgba(0,0,0,.6)
}
 
.ventana{
    width:600px;
    height:600px;
    padding:1em;
    background-color:#ccc;
    position:absolute;
    top:10%;
    left:-300px;
    margin-left:50%;
}
 
.cerrar{
    position:absolute;
    bottom:2em;
    right:2em;
    cursor:pointer;
    }

Código Javascript:

Ver original$(document).ready(function () {
   $('.cerrar').click(function () {
        $('.modal').fadeOut(300);
   });
});

Asi debería funcionar perfecto lo acabo de probar..

PD: Me quedé pensando, tenes linkeada la libreria JQuery? Sino nunca va a funcionar

En caso de que la respuesta sea "no".. tenes que colocar esto:

Código HTML:

Ver original<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

En el head o al final del documento, antes de la etiqueta </body>.. (mas recomendable la segunda opcion)

Código HTML:

Ver original<body>
   <!-- Contenido -->
   <!-- Contenido -->
   <!-- Contenido -->
   <!-- Contenido -->
   <!-- Contenido -->
   <!-- Contenido -->
   <!-- Contenido -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

Asi SI tiene que funcionar.