jquery modal dialog onclick?

Voglio che questo:jquery modal dialog onclick?

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

a happend quando si fa clic su ClickMe.

come fare questo?

<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>

nulla happends

fonte

2010-02-28 Karem

Invece di div.thedialog, fornire div#thedialog. lo . viene utilizzato con i nomi di classe e # viene utilizzato quando si lavora con id.

(Inoltre, se questo è il codice vero e proprio si è utilizzato, c'era una staffa mancante :))

Il codice di lavoro:

<!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>

fonte

2010-02-28 23:46:15 madaboutcode

+1 non dimenticare di includere il foglio di stile, sembra meglio :) –

@Alex ha aggiornato la risposta con il foglio di stile. – madaboutcode

utilizzando la finestra di jQuery UI, in $(document).ready(...) fare:

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

per creare la finestra e

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

per aprirlo.

fonte

2010-02-28 23:06:55 Rune

non funziona .. ho questo: Clickme e poi quelle due righe nel documento sono pronte, e quindi una casella div denominata "thedialog" ma non funzionerà – Karem

@Azzyh I cosa che @Rune significa che devi fare uno script per questo.

mettere questo nel tag del codice HTML

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

(anche bisogna avere lo script JQuery-ui e sceneggiatura JQuery troppo collegato alla tua pagina con il come segato sopra (ex <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/jquery-ui.min.js" type="text/javascript"></script>) < - nel caso della strega carica la sceneggiatura di internet).

Dove script.js è il file di script (nella stessa cartella del file html).

Ora, nelle script.js si scrive

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

PS: Leggi this book se volete imparare a fare tutto ciò che roba fresca che si vede su internet.

fonte

2010-02-28 23:25:44 storedope

jquery modal dialog onclick?

risposta

Problemi correlati