JQuery:单击body上的任意位置以关闭此代码的模式对话框

Question

JQuery:单击body上的任意位置以关闭此代码的模式对话框

这里问同样的问题.但它没有说明来源,并且给出的解决方案不能直接适用于我的案例.我可能会因此而受到限制,但无论如何我都在问. 我的整个代码:

<html><head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/humanity/jquery-ui.css" type="text/css" />
    </head>
    <body><div id="dialog" title="Title Box">
        <p>Stuff here</p>
    </div>
    <script type="text/javascript">
      jQuery(document).ready(function() {
        jQuery("#dialog").dialog({
          bgiframe: true, autoOpen: false, height: 100, modal: true
        });
      });
    </script>
    <a href="#" onclick="jQuery('#dialog').dialog('open'); return false">Click to view</a>
</body></html>

Run Code Online (Sandbox Code Playgroud)

所有脚本文件都是第三方托管的,我希望保持这种方式.

如何"点击任意位置(框外)以关闭模式框"功能？

Answer 1

Tho*_*mas 6

<html>
 <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/humanity/jquery-ui.css" type="text/css" />
 </head>
 <body>
  <div id="dialog" title="Title Box">
   <p>Stuff here</p>
  </div>
  <script type="text/javascript">
   jQuery(
    function() {
     jQuery("#dialog")
      .dialog(
       {
        bgiframe: true,
        autoOpen: false,
        height: 100,
        modal: true
       }
      );
     jQuery('body')
      .bind(
       'click',
       function(e){
        if(
         jQuery('#dialog').dialog('isOpen')
         && !jQuery(e.target).is('.ui-dialog, a')
         && !jQuery(e.target).closest('.ui-dialog').length
        ){
         jQuery('#dialog').dialog('close');
        }
       }
      );
    }
   );
  </script>
  <a href="#" onclick="jQuery('#dialog').dialog('open'); return false">Click to view</a>
 </body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，5 月前
查看次数：	27149 次
最近记录：	14 年，3 月前