Search code examples
javascriptjquerynotifyjs

How to programmatically close notify.js notification?


In the following sample I am trying to close an opened notification forcefully by clicking the button as suggeseted in the notify.js API advanced example, how can this be done?

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>


Solution

  • You have to trigger notify-hide event for div which represents notify element.

    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>

    Here is the snippet which shows how looks DOM structure:

    <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>