jQuery pop up通过点击弹出窗口中的任意位置来添加关闭功能

时间:2014-07-30 18:21:36

标签: javascript jquery css html5

我正在使用jQuery对话框制作一个弹出框,但我似乎可以在任何地方点击关闭它,我尝试添加

closeOnContentClick: true

这是我的代码:

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

     

<script type="text/javascript">
    $(document).ready(function () {
        $("#OpenDialog").click(function () {
            $("#dialog").dialog({modal: true, height: 590, width: 1005, closeOnContentClick: false });
        });
    });
</script>

<a id="OpenDialog" href="#">Click here to open dialog</a>
<div id="dialog" title="Dialog Title">
    <p>pop up</p>
</div>

关于如何在点击它的任何地方时让盒子关闭的任何建议?

1 个答案:

答案 0 :(得分:1)

检查一下它可能对你来说很完美。 http://jsfiddle.net/jasonday/6FGqn/

$('#open').click(function() {
    $('#dialog').dialog('open');
});

<div id="dialog">Your non-modal dialog</div>
<a href="#" id="open">Open dialog</a>

jQuery(document).ready(function() {
jQuery("#dialog").dialog({
    autoOpen: false,
    modal: true,
    open: function(){
        jQuery('.ui-widget-overlay').bind('click',function(){
            jQuery('#dialog').dialog('close');
        })
    }
});
});