Foros del Web - Ver Mensaje Individual

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.