Custombox

Name: Custombox
Brand: Jose Aguilar
SKU: joseaguilarblog-6152
Availability: InStock
Rating: 5 (6 reviews)

Custombox es un plugin de jQuery que nos permite abrir ventanas modales con efectos de transición muy interesantes utilizando también CSS3.

custombox

En el ejemplo que vamos a ilustrar vamos a darle un poco de estilo a la ventana modal cogiendo los estilos de bootstrap. Añadiremos en la cabecera las siguientes hojas de estilo:

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="demo/css/demo.css">
<link rel="stylesheet" href="src/jquery.custombox.css">

También en la cabecera, deberemos añadir la librería jQuery, el plugin y su llamada:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="src/jquery.custombox.js"></script>
<script>
$(function() {
    $('#example').on('click', function () {
        $.fn.custombox( this, {
            effect: 'newspaper'
        });
        return false;
    });
});
</script>

El plugin dispone de muchos efectos de transición. En el caso de nuestro ejemplo, nos ha llamado la atención el efecto newspaper.

Ahora, tan solo nos falta añadir en el <body> el link que abre la ventana modal y el div que contiene la ventana modal incialmente en display:none.

<p><a href="#modal" id="example">Abrir ventana modal</a></p>
<div id="modal" style="display: none;" class="modal-example-content">
    <div class="modal-example-header">
        <button type="button" class="close" onClick="$.fn.custombox('close');">&times;</button>
        <h4>jQuery Custombox</h4>
    </div>
    <div class="modal-example-body">
        <!--YOUR CONTENT MODAL-->
    </div>
</div>

Y ya tendríamos nuestra ventana modal utilizando el plugin custombox con el efecto newspaper.

Todos los archivos mencionados están en el archivo comprimido de descarga.

Ver ejemplo en funcionamiento

Ver ejemplos y más información