jquery模态对话框onclick?

前端之家收集整理的这篇文章主要介绍了jquery模态对话框onclick?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我要这个:

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

当您点击ClickMe时发生.

怎么办?

  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. $('div.thedialog').dialog({ autoOpen: false })
  4. $('#thelink').click(function(){ $('div.thedialog').dialog('open'); });
  5. }
  6. </script>
  7. </head>
  8. <body>
  9. <div id="thedialog" title="Download complete">
  10. <p>
  11. <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
  12. Your files have downloaded successfully into the My Downloads folder.
  13. </p>
  14. <p>
  15. Currently using <b>36% of your storage space</b>.
  16. </p>
  17. </div>
  18. <a href="#" id="thelink">Clickme</a>

没什么发生

解决方法

而不是div.thedialog,给div#thedialog.的.与类名一起使用,当使用ids时,会使用#.

(另外,如果这是您使用的实际代码,则有一个缺少的括号:))

工作代码

  1. <!doctype html>
  2. <head>
  3. <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/ui-lightness/jquery-ui.css" />
  4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  5. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
  6. <script type="text/javascript">
  7. $(document).ready(function() {
  8. $('div#thedialog').dialog({ autoOpen: false })
  9. $('#thelink').click(function(){ $('div#thedialog').dialog('open'); });
  10. })
  11. </script>
  12. </head>
  13. <body>
  14. <div id="thedialog" title="Download complete">
  15. <p>
  16. <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
  17. Your files have downloaded successfully into the My Downloads folder.
  18. </p>
  19. <p>
  20. Currently using <b>36% of your storage space</b>.
  21. </p>
  22. </div>
  23. <a href="#" id="thelink">Clickme</a>
  24. </body>

猜你在找的jQuery相关文章