发表新帖
发表新帖

jquery modal dialog onclick?

前端 未结
关注
3 833
我寻月下人不归
我寻月下人不归 2021-02-20 13:39

I want this:

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

to happend when you click on ClickMe.

how to do this?
相关标签:
3条回答
  • Happy的楠姐
    2021-02-20 14:03

    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)
  • 南方客
    2021-02-20 14:08

    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)
  • 醉酒成梦
    2021-02-20 14:10

    @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)
 看不清?
提交回复
热议问题