如何通过使用jquery ui在函数中单击外部来关闭非模态对话框

时间:2017-09-04 08:04:52

标签: javascript jquery-ui

这里我定义了一个调用各种对话框的函数,但我无法通过点击外部关闭它。请帮助我。

由于

的javascript

/*function for dialog box */

function dialogBox(dialoge,opener){
if(dialoge.length>0 && opener.length>0){
  dialoge.dialog({ 
    autoOpen: false,
    width: 300,  //width
    height: "auto",

    buttons: {
      Close: function() {
        dialoge.dialog( "close" );
      }
  }
  });
 $("body").on("click",".ui-widget-overlay",function() {
 dialoge.dialog( "close" );   /*this works for modal */
 });
  opener.click(function() {
    dialoge.dialog("open");
    return false;
  });    
 }
 }

函数调用

 var desc_add = $(".dialog");
 var desc_open = $(".opener");
 if(desc_add && desc_open){
desc_open.change(function(){
  dialogBox(desc_add, desc_open);
  });
 dialogBox(desc_add, desc_open);
 }

红宝石

<%= image_tag("/assets/help.png", :alt => "info", class: "opener") %>
<div id="dialog" title="HELP">for the addess</div>

1 个答案:

答案 0 :(得分:0)

这里有很多可能适合您案例的例子:

How do I detect a click outside an element?

不要忘记修复你的javascript,它还有一个额外的})