web-dev-qa-db-fra.com

jQuery modal dialogue onclick?

Je veux ceci:

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

se produire lorsque vous cliquez sur ClickMe.

comment faire ça?

<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 ne se passe

jquerydialogmodal-dialog
10
Karem

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

(En outre, s'il s'agit du code que vous avez utilisé, il manquait un crochet :))

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

À l’aide du jQuery UI Dialog, dans $(document).ready(...) do:

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

pour créer le dialogue et

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

pour l'ouvrir.

0
Rune

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

Vous mettez cela dans la balise de votre HTML

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

(vous devez également avoir le script JQuery-ui et le script JQuery également liés à votre page avec l'option telle que vue 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 où il chargerait le script d'Internet).

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

Maintenant, dans le script.js vous écrivez

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

PS: Lisez ce livre si vous aimez apprendre à faire Toutes ces choses cools que vous voyez sur Internet.

0
Kevin