Como implementar simplemodal

Marti1982 · #1 (**permalink**) 03/12/2009, 11:06

Hola. Estoy intentando implantar un plugin jquery para el uso de popups en mi web (simplemodal), pero no tengo ni idea como he de hacerlo. Aqui explica como usarlo:

http://www.ericmmartin.com/projects/simplemodal/

Ya en la primera linea dice que puedo llamar a la funcion modal() usando esta linea:

$("#element-id").modal();

pero donde se supone que he de añadir dicha linea? Disculpar si es algo muy basico, pero no se nada de jquery. Gracias por adelantado.

JavierB · #2 (**permalink**) 03/12/2009, 11:11

Hola Marti1982

Muevo tu tema al foro de Frameworks desde Javascript.

Saludos,

mayid · #3 (**permalink**) 03/12/2009, 11:41

Como siempre, el codigo va dentro de etiquetas script, en cabecera.

Pensa que jQuery no es mas que una sintaxis alternativa a javascript, con la que lograr cosas mas rapido o con menos codigo.

Por otro lado, para que esa sintaxis funcione, necesitas incluir la libreria jquery en cabecera:

Cita:

Y asi mismo tenes que incluir la libreria de tu plugin, y su css.

Una buena manera de aprender estas cosas en ver el codigo fuente de las demos de los plugins.

Marti1982 · #4 (**permalink**) 03/12/2009, 11:52

javerB

Gracias por ponerlo en su sitio correspondiente, disculpa el despiste.

mayid

Muchas gracias. Te pido disculpas ya que no habia mencionado que esa es la unica parte que comprendo, la de incluir la libreria, lo que no entiendo donde o como se supone que llamo a la funcion con:

$("#element-id").modal();

De todas formas estoy empezando a empaparme con algunos tutoriales, espero acabar dominandolo

mayid · #5 (**permalink**) 03/12/2009, 12:56

Bueno, lo haces cuando este cargada la pagina. En jquery es asi:

Cita:

$(document).ready(function(){

// lo que sea
$("#element-id").modal();

})

Dany_s · #6 (**permalink**) 03/12/2009, 18:48

lo tienes que poner como cuando haces un alert con javascript

Código HTML:

$(document).ready(function(){
$("#element-id").modal();
})

le dice que cuando se carga la página que muestre el elemento con id "element-id"
ponele que sea un div

Código:

<div id="element-id">Holaaaaaaaaaa</div>

si quieres que aparezca cuando le dan un clic a un enlace haces

Código HTML:

$('#id-enlace').click(function(){
$("#element-id").modal();
})

en este ejemplo hay un div con id "ventana" que esta oculto y con jquery le digo que cuando hacen click en el elemento con id "saludo" (o sea el enlace) que muestre dicho div

a la funcion modal le puse como parámetro la opción que muestra un botón para cerrar la ventanita

Código HTML:

<html>
    <head>
        <title>Ejemplo modal</title>
        <script src="jquery.min.js" type="text/javascript"></script>
        <script src="jquery.simplemodal.js" type="text/javascript"></script>
    </head>
    <script type="text/javascript">
        $().ready( function (){
            $('#saludo').click(function (){
                $('#ventana').modal({closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>"});
            });
        });
    </script>
    <style type="text/css">
    #ventana{display:none; padding:10px; background:red}
    </style>
    <body>
        <a href="#" id="saludo">Dice hola</a>
        <div id="ventana">Holaaaaaaaaaa</div>
    </body>
</html>