javascript - 隐藏模态窗口javascript

Question

所以为了显示这个模式，我有以下代码：

<button type="button" onclick="openModal(); return false;">A button</button>

并且为此的javascript是：

<script type='text/javascript'>
function openModal(a)   
    {
        $.modal({
            content:  'Some content here',
            title: 'a title',
            maxWidth: 500,

        });
        win.closeModal();
    }

</script>

我需要一个可以隐藏它的功能。谁能给我一些关于如何执行 hideModal() 功能的建议，当我单击屏幕上的任何位置时，该功能将隐藏模式？

Answer 1

在浏览器窗口中打开模式，使用浏览器的控制台尝试

  var modal;
    function btnsModal() {
        var btns = {
            'Close': function (win) {
                modal.closeModal()
            }
        }
        return btns;
    }

    function openModal(oLink, content) {
        var btn = btnsModal();
        modal = $.modal({
            buttons: btn
        });
    }

Answer 2

您可以将“打开”事件添加到对话框，然后将单击侦听器绑定到它，如果您单击任何位置，它将关闭对话框---

open: function(){
        jQuery('.ui-widget-overlay').bind('click',function(){
            jQuery('#ID_of_ur_dialog').dialog('close');
        })
    }

对于隐藏效果，您可以使用“隐藏”选项---

hide: "highlight"

Answer 3

这是愚蠢的...

我在 css 中使用 display none 修复了这个问题...事实证明我没有把它加厚...我添加了 display none 和一个 JS 事件，该事件在单击页面中的任何其他位置时触发 CSS，模式除外。

非常感谢您的所有投入！真的很感激！