如何在单击窗口的任何位置关闭通知

Posted 2023-05-08

【中文标题】如何在单击窗口的任何位置关闭通知

【英文标题】：How to close noty on any where click on window

【发布时间】：2018-02-13 14:35:30

【问题描述】：

目前我们使用的是 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();

                        
                    
        ]
    );

我可以用不注意的按钮单击来关闭它吗？

【问题讨论】：

请提供html代码

【参考方案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();
);