jquery diálogo modal onclick?

quiero esto:jquery diálogo modal onclick?

http://jqueryui.com/demos/dialog/#modal-message

que sucedió cuando se hace clic en ClickMe.

cómo hacerlo?

<script type="text/javascript"> 
$(document).ready(function() { 
$('div.thedialog').dialog({ autoOpen: false }) 
$('#thelink').click(function(){ $('div.thedialog').dialog('open'); }); 
} 
    </script> 
</head> 
<body> 
<div id="thedialog" title="Download complete"> 
    <p> 
     <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span> 
     Your files have downloaded successfully into the My Downloads folder. 
    </p> 
    <p> 
     Currently using <b>36% of your storage space</b>. 
    </p> 
</div> 
<a href="#" id="thelink">Clickme</a>

nada happends

Fuente

2010-02-28 Karem

En lugar de div.thedialog, indique div#thedialog. el . se usa con nombres de clase y # se usa cuando se trabaja con identificadores.

(También, si este es el código real que utilizó, había un soporte de falta :))

El código de trabajo:

<!doctype html> 
<head> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/ui-lightness/jquery-ui.css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
$(document).ready(function() { 
$('div#thedialog').dialog({ autoOpen: false }) 
$('#thelink').click(function(){ $('div#thedialog').dialog('open'); }); 
}) 
    </script> 
</head> 
<body> 
<div id="thedialog" title="Download complete"> 
    <p> 
     <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span> 
     Your files have downloaded successfully into the My Downloads folder. 
    </p> 
    <p> 
     Currently using <b>36% of your storage space</b>. 
    </p> 
</div> 
<a href="#" id="thelink">Clickme</a> 
</body>

Fuente

2010-02-28 23:46:15 madaboutcode

+1 simplemente no olvides incluir la hoja de estilos, se ve mejor :) –

@Alex actualizó la respuesta con la hoja de estilos. – madaboutcode

Usando los jQuery UI de diálogo, en $(document).ready(...) hacer:

$('div.thedialog').dialog({ autoOpen: false })

para crear el diálogo y

$('#thelink').click(function(){ $('div.thedialog').dialog('open'); });

para abrirlo.

Fuente

2010-02-28 23:06:55 Rune

no funciona .. tengo esto: Clickme y luego esas dos líneas en documento listo, y luego una caja div llamada "el cuadro de diálogo" pero no funcionará – Karem

@Azzyh Lo que @Rune significa que tiene que hacer un script para ello.

poner esto en la etiqueta de su html

<script src="script.js" type="text/javascript"></script>

(también hay que tener la secuencia de comandos de jQuery-UI y el guión jQuery demasiado vinculados a su página con el aserrada anteriores (Ej <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/jquery-ui.min.js" type="text/javascript"></script>) < - en el caso de que cargue el script de internet).

Donde script.js es el archivo de script (en la misma carpeta que el archivo html).

Ahora, en los script.js se escribe

$(document).ready(function(){ 
    $('div.thedialog').dialog({ autoOpen: false }) 
    $('#thelink').click(function(){ $('div.thedialog').dialog('open'); }); 
});

PS: Leer this book si se quiere aprender a hacer todas las cosas interesantes que usted ve en el Internet.

Fuente

2010-02-28 23:25:44 storedope

Respuesta

Cuestiones relacionadas