jQuery UI的对话框关闭上点击任何地方

我想结束我的弹出，如果我点击以外的任何地方popupbox的
$（ “弹出”）。对话框（{jQuery UI的对话框关闭上点击任何地方

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <link href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" /> 
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> 
    <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $(".popup").dialog({ 
       autoOpen: false, 
       draggable: true, 
       title: "Add New Person", 
       open: function (type, data) { 
        $(this).parent().appendTo("form"); 
       } 
      }); 
      $("#body1") 
       .bind(
       'click', 
       function (e) { 
       if (
      jQuery('.popup').dialog('isOpen') 
      && !jQuery(e.target).is('.ui-dialog, a') 
      && !jQuery(e.target).closest('.ui-dialog').length 
      ) { 
        jQuery('.popup').dialog('close'); 
       } 
       } 
      ); 
     }); 
     function showDialog(id) { 
      $('#' + id).dialog("open"); 
     } 
     function closeDialog(id) { 
      $('#' + id).dialog("close"); 
     } 
    </script> 
</head> 
<body id="body1"> 
    <input type="button" onclick="showDialog('pop101');" value="Popup1" /> 
    <input type="button" onclick="showDialog('pop102');" value="Popup2" /> 
    <input type="button" onclick="showDialog('pop103');" value="Popup3" /> 
    <div style="background: green" id='pop101' class="popup"> 
    </div> 
    <div style="background: orange" id='pop102' class="popup"> 
    </div> 
    <div style="background: blue" id='pop103' class="popup"> 
    </div> 
</body> 
</html>

点击buttoon到打开一个弹出窗口，当我们点击弹出窗口外，我想要弹出窗口，怎么可能？

来源

2012-09-18 vir

可能的复制http://stackoverflow.com/questions/2554779/jquery-ui-close-dialog-when-clicked-outside – hsalama

其实我试图从这里和那里的东西（stackoverlflow），我无法解决这就是为什么我张贴:) – vir

你是否使用这种模式？即在打开时阻止对底层页面的所有访问？ – hsalama

你应该能够使用$(document).click(function(e) { });检测点击文档中的任何地方 - 保持一个标志/布尔值来指示当前弹出如果有必要的话 - （没有检查你的标记， s已经在过去工作，但可能不适合你的情况/结构），或者你可以创建一个覆盖你的站点的所有元素，禁止对话框，然后检测它的点击。

来源

2012-09-18 12:38:25

作为例子看看这个：

$(document).ready(function() 
{ 
    $(".popup").dialog({ 
     autoOpen: false, 
     draggable: true, 
     title: "Add New Person", 
     open: function (type, data) { 
      $(this).parent().appendTo("#container"); 
     } 
    }); 
    $('[data-popup^="pop"]').click(function(e){ 
     close(); //close all opened dialogs 
     e.stopPropagation(); // stop body1 click 
     $('#' + $(this).data('popup')).dialog("open"); 
    }); 

    var close = function() 
    { 
     $('.ui-dialog:visible').find('.popup').dialog('close'); 
    }; 

    $('#body1').click(close); 
});

演示：jsfiddle.net/pXszH/2/

来源

2012-09-18 12:41:35 webdeveloper

他的对话框不是模态 – Alnitak

坚持，对话框和模态有什么不同？ – vir

@webdevloper，不在我的情况下工作！ – vir

这似乎工作：

open: function() { 
    var self = this; 
    $(this).parent('.ui-dialog').on('click', false); 
    $(document).one('click', function() { 
     $(self).dialog('close'); 
    }); 
}

的想法是，你赶上对话框本身内的任何点击，但允许任何其他点击通过document（带有“一次性”事件处理程序）并关闭对话框。

见http://jsfiddle.net/alnitak/RJ7nt/

来源

2012-09-18 12:44:06 Alnitak

它不适合我！为什么？代码：http：// pastebin。com/iTv1nXT7 – vir

，因为您使用的是不支持'.on'的_ancient_版本的jQuery。如果你使用'.bind'，它可能会工作。附：请学习一些礼仪...... – Alnitak

我写了.bind（'click'，false）;，仍然不工作 – vir

Here you go: jsFiddle example

HTML：

<form id="popup-buttons"> 
    <input type="button" value="Popup1" data-popup-id="pop101"/> 
    <input type="button" value="Popup2" data-popup-id="pop102"/> 
    <input type="button" value="Popup3" data-popup-id="pop103"/> 
</form> 
<div style="background: green" id='pop101' class="popup"> 
</div> 
<div style="background: orange" id='pop102' class="popup"> 
</div> 
<div style="background: blue" id='pop103' class="popup"> 
</div>

的JavaScript：

function showDialog(id) { 
    $('#' + id).dialog("open"); 
} 
function closeDialog(id) { 
    $('#' + id).dialog("close"); 
}  

$(document).ready(function() { 
    // Handle clicks on buttons 
    //$("#popup-buttons").on("click", "input", function(e) { // for new jQuery.... 
    $("input[type=button]").click(function(e) {  // for old jQuery 
     console.log("input click", e); 
     var value = $(e.currentTarget).attr("data-popup-id"); 
     if (value) 
      showDialog($(e.currentTarget).attr("data-popup-id")); 
     else 
      console.log("Error: user clicked on unexpected element"); 
     // Stop elements further up the DOM tree from processing this event 
     e.stopPropagation(); 
    }); 

    // Handle "other" clicks 
    $("html").click(function(e) { 
     console.log("default click handler", e); 
     $("div.popup").each(function(i,e) { 
      closeDialog($(this).attr("id")); 
     }); 
    }); 

    $(".popup").dialog({ 
     autoOpen: false, 
     draggable: true, 
     title: "Add New Person", 
     open: function (type, data) { 
      $(this).parent().appendTo("form"); 
     } 
    }); 
});

来源

2012-09-18 12:46:33 iX3

但是，如果我在同一页面有10个弹出窗口，我想尽量减少这个j查询代码:(也并不需要所有按钮都以一种形式存在） – vir

您可以修改选择器。硬编码一个onclick到HTML标记？我会稍微修改它以向你展示我的意思，但我强烈建议将事件委托给一个包含元素，以便每个元素只有一个处理程序而不是一个处理程序。：http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html – iX3

@一切，感谢你们的努力，你们是惊人的..我了解到很多

工作代码是在这里：http://pastebin.com/7CvWWqC9

来源

2012-09-19 05:59:27 vir

jQuery UI的对话框关闭上点击任何地方

回答

相关问题