Foros del Web - Ver Mensaje Individual - 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!