javascript - 如何在点击窗口的任何地方关闭通知

Question

目前我们正在使用 Jquery Noty，它会在 5 秒后自动关闭。 但我们也希望如果任何用户点击屏幕上的任何地方，它也应该在这种情况下关闭。

在这种情况下，任何人都可以帮助我。

下面是在屏幕上获取 Noty 的代码

    var objnoty = noty({

        // Text Shown on Error
        text: '<div class="Close" onclick="closeNoty(this)"></div><div> <div class="Main_Err">' + errorMainText + '</div><div class="LineGap"></div><div class="Subhead">' + errorSubText + '</div></div> ',

        // Property used to define Error Layout Shown.
        layout: 'topRight',

        // Type of Noty
        type: 'error',

        // Theme used.
        theme: 'defaultTheme',

        killer: true,

        maxVisible: 1,

        // Basic Animations
        animation: {
            open: { height: 'toggle' }, // or Animate.css class names like: 'animated bounceInLeft'
            close: { height: 'toggle' }, // or Animate.css class names like: 'animated bounceOutLeft'
            easing: 'swing',
            speed: 500 // opening & closing animation speed
        },

        // ['click', 'button', 'hover', 'backdrop'] // backdrop click will close all notifications
        closeWith: [],

        // Used to set the time out of noty.
        timeout: 500,

        // Call back events
        callback: {

            // function is called before noty is shown 
            // It is used to set the noty count to open again one noty
            onShow: function () {
                var panel = GetCtlObject('dvPersonalDataContainer');
                var collapseButton = $(panel).find('.panel-collapsebutton-image');
                if (collapseButton.length > 0) {
                    changePanelState($(panel).find('.panel-expandbutton'), null);
                }

                setTimeout(function () { setFocusOnFirstErrControl(); }, 80);
                setValue(Control.HDNotyCount, TSIConstants.One);
                setRightPostion();
            },


            // function is called on close on noty.
            // It is used to reset the noty count and enable noty visibilty.
            onClose: function () {
                setValue(Control.HDNotyCount, TSIConstants.Zero);
                jsonObjectList = [];

            },

            // function called after noty is shown.
            // It is used to set the timer to close the noty again.
            afterShow: function () {

                var that = this;

                setTimeout(function () {
                    setValue(Control.HDNotyCount, TSIConstants.Two);
                    jsonObjectList = [];
                }, 0);


                $($('.noty_text').parent().parent()).mouseenter(function () {
                    focus = 0;
                    clearTimeout(NotyHideTime);
                });

                $($('.noty_text').parent().parent()).mouseleave(function () {
                    focus = 1;
                      that.setTimeout(5000);
                });

                  NotyHideTime = that.setTimeout(5000);
            },
        },

        // Button used to close noty
        buttons: [
                    {
                        addClass: 'btn btn-primary', text: 'Ok', onClick: function ($noty) {
                            $noty.close();

                        }
                    }
        ]
    });
}

我可以用没有通知的按钮点击来关闭它吗？

Answer 1

设置 modal: true 以显示具有模态背景的通知，如下所示:

new Noty({
  text: 'your message',
  type: 'error',
  dismissQueue: false,
  layout: 'center',
  modal: true
}).show();

然后您将能够捕获模态背景点击以关闭通知:

$(document).on('click', '.noty_modal', function(){
	$('.noty_bar').click();
});