Boîte de dialogue jquery modale onclick?

Je veux ceci:Boîte de dialogue jquery modale onclick?

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

à happend lorsque vous cliquez sur ClickMe.

Comment faire?

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

rien happends

Source

2010-02-28 Karem

Au lieu de div.thedialog, donner div#thedialog. le . est utilisé avec les noms de classe et # est utilisé lorsque vous travaillez avec des ID.

(également, si cela est le code réel que vous avez utilisé, il y avait un support manquant :))

Le code de travail:

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

Source

2010-02-28 23:46:15 madaboutcode

+1 ne pas oublier d'inclure la feuille de style, son apparence est meilleure :) –

@Alex mis à jour la réponse avec la feuille de style. – madaboutcode

Utilisation de la jQuery UI Dialog, en $(document).ready(...) faire:

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

pour créer le dialogue et

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

pour l'ouvrir.

Source

2010-02-28 23:06:55 Rune

doesnt work .. i ont ceci: Clickme puis ces deux lignes dans le document prêt, et puis une boîte div appelée "thedialog", mais il ne fonctionnera pas – Karem

@Azzyh Je pense que @Rune signifie que vous devez créer un script pour cela.

que vous mettez cela dans la balise de votre html

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

(aussi vous devez avoir le script JQuery-ui et un script JQuery trop lié à votre page avec le comme scié ci-dessus (ex <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/jquery-ui.min.js" type="text/javascript"></script>) < - Dans le cas de sorcière, il charge le script de l'Internet).

Où script.js est le fichier de script (dans le même dossier que le fichier html).

Maintenant, dans les script.js vous écrivez

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

PS: Lire this book si vous voulez apprendre comment faire tout ce genre de choses cool que vous voyez sur l'Internet.

Source

2010-02-28 23:25:44 storedope

Boîte de dialogue jquery modale onclick?

Répondre

Questions connexes