如何以编程方式关闭 notify.js 通知？

Question

在下面的示例中，我试图通过单击 notify.js API 高级示例中建议的按钮来强制关闭打开的通知，如何才能做到这一点？

function CLOSE() {
  $('#btn').trigger('notify-hide');
}
$(document).ready(function() {

  $('#btn').notify('test note', {
    position: 'right'
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/notify/0.4.2/notify.js"></script>

<button onClick="CLOSE()" id="btn" class="tst">Test</button>

Answer 1

您必须为代表 notify 元素的 div 触发 notify-hide 事件。

function CLOSE() {
  $('.notifyjs-wrapper').trigger('notify-hide');
}
$(document).ready(function() {

  $('#btn').notify('test note', {
    position: 'right'
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/notify/0.4.2/notify.js"></script>

<button onClick="CLOSE()" id="btn" class="tst">Test</button>

这是展示 DOM 结构的片段：

<div class="notifyjs-wrapper notifyjs-hidable">
     <div class="notifyjs-arrow" style="left: 41px; top: 6px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid rgb(238, 211, 215); display: none;">
     </div>
     <div class="notifyjs-container" style="left: 46px; top: -7.5px; display: none;">
         <div class="notifyjs-bootstrap-base notifyjs-bootstrap-error">
                <span data-notify-text="">test note</span>
         </div>
     </div>
</div>

Answer 2

这个方法我用过

$(".notifyjs-arrow").html('<i class="fas fa-times-circle" style="position:absolute; text-align:right;top:-7px;color:red;right:-320px"></i>');

Answer 3

如果您有多个通知并且您不需要一次全部关闭它们，可以在通知中添加特定的 class，稍后通过它找到通知元素并隐藏它。

// first ajax request started
$.notify("The notification #1", {className: "info n1", autoHide: false});
...
// second ajax request started
$.notify("The notification #2", {className: "info n2", autoHide: false});
...
// first ajax request done
$(".n1").toggle('notify-hide');

第二个通知不会隐藏。

如何以编程方式关闭 notify.js 通知？

How to programmatically close notify.js notification?

javascript

jquery

notifyjs