jquery modal dialog onclick?

I want this:

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

to happend when you click on ClickMe.

how to do this?

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

nothing happends

标签： jquery dialog modal-dialog

3条回答

时光不老，我们不散

2楼-- · 2019-04-05 05:48

Instead of div.thedialog, give div#thedialog. the . is used with class names and # is used when you are working with ids.

( Also, if this is the actual code you used, there was a missing bracket :) )

The working code:

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

0人赞添加讨论(0) 举报

Root（大扎）

3楼-- · 2019-04-05 05:55

@Azzyh I thing that @Rune means that you have to make a script for it.

You put this into the tag of your html

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

(also you have to have the JQuery-ui script and JQuery script too linked to your page with the as sawn above (ex <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/jquery-ui.min.js" type="text/javascript"></script>) <- in witch case he load the script of the internet).

Where script.js is the script file ( in the same folder as the html file ).

Now, in the script.js you write

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

PS: Read this book if you like to learn how to do All that cool stuff you see on the internet.

0人赞添加讨论(0) 举报

放荡不羁爱自由

4楼-- · 2019-04-05 06:07

Using the jQuery UI Dialog, in $(document).ready(...) do:

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

to create the dialog and

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

to open it.

0人赞添加讨论(0) 举报

jquery modal dialog onclick?

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间