Уведомления о предупреждениях не работают

Question

Мне нужно настроить оповещения для моего сайта. Я использую этот простой notification script. Я тестировал это на своем веб-сайте, как это.

<div id="notifications"> 
<div class="alert alert-danger" role="alert"> 
    <a class="button close" style="padding-left: 10px;" href="#">×</a> 
    <i class="fa fa-info-circle "></i> 
    Thanks 
</div> 
</div> 

Стили

#notifications { 
    cursor: pointer; 
    position: fixed; 
    right: 0; 
    z-index: 9999; 
    bottom: 0; 
    margin-bottom: 22px; 
    margin-right: 15px; 
    max-width: 300px; 
} 

сценария

$(document).ready(function() { 
    Notify = function(text, callback, close_callback, style) { 

    var time = '10000'; 
    var $container = $('#notifications'); 
    var icon = '<i class="fa fa-info-circle "></i>'; 

    if (typeof style == 'undefined') style = 'warning' 

    var html = $('<div class="alert alert-' + style + ' hide">' + icon + " " + text + '</div>'); 

    $('<a>',{ 
    text: '×', 
    class: 'button close', 
    style: 'padding-left: 10px;', 
    href: '#', 
    click: function(e){ 
     e.preventDefault() 
     close_callback && close_callback() 
     remove_notice() 
    } 
    }).prependTo(html) 

    $container.prepend(html) 
    html.removeClass('hide').hide().fadeIn('slow') 

    function remove_notice() { 
    html.stop().fadeOut('slow').remove() 
    } 

    var timer = setInterval(remove_notice, time); 

    $(html).hover(function(){ 
    clearInterval(timer); 
    }, function(){ 
    timer = setInterval(remove_notice, time); 
    }); 

    html.on('click', function() { 
    clearInterval(timer) 
    callback && callback() 
    remove_notice() 
    }); 


} 

    }); 

Уведомление правильно появляясь из-за CSS стилей. Но скрипт не работает. Если я нажимаю значок «Закрыть» в уведомлении, он не закрывается. Когда я перезагружаю страницу, она остается на (автоматическое закрытие тоже не работает). Что мне не хватает в моем скрипте?

Answer 1

Ваши требования немного сложно понять. Вы правильно указываете «уведомление», но единственное, что я вижу, - x Thanks в нижнем правом углу. Однако это не уведомление, оно исходит из вашей разметки. У него нет события, связанного с ним, поэтому ничего не произойдет, когда он будет нажат.

Ваша основная проблема заключается в том, что вы определяете что-то, называемое Notify, но затем ничего не делаете с ним. Чтобы помочь вам решить эту проблему, см. Ниже фрагмент. Это, вероятно, не совсем то, что вы хотите, но я думаю, что это намного ближе.

$(document).ready(function() { 
 
    Notify = function(text, callback, close_callback, style) { 
 

 
     var time = '10000'; 
 
     var $container = $('#notifications'); 
 
     var icon = '<i class="fa fa-info-circle "></i>'; 
 

 
     if (typeof style == 'undefined') style = 'warning'; 
 

 
     var html = $('<div class="alert alert-' + style + ' hide">' + icon + " " + text + '</div>'); 
 

 
     $('<a>', { 
 
      text: '×', 
 
      class: 'button close', 
 
      style: 'padding-left: 10px;', 
 
      href: '#', 
 
      click: function(e) { 
 
       e.preventDefault(); 
 
       e.stopPropagation(); 
 
       close_callback(); 
 
       remove_notice(); 
 
      } 
 
     }).prependTo(html); 
 

 
     $container.prepend(html); 
 
     html.removeClass('hide').hide().fadeIn('slow'); 
 

 
     function remove_notice() { 
 
      // html.stop().fadeOut('slow').remove() 
 
      html.fadeOut('slow', function() { 
 
       $(this).remove(); 
 
      }); 
 
     } 
 

 
     var timer = setInterval(remove_notice, time); 
 

 
     $(html).hover(function() { 
 
      setMessage('You hovered over me.'); 
 
      clearInterval(timer); 
 
     }, function(){ 
 
      if (parseInt(html.css('opacity')) === 1) { 
 
       // element is not currently being faded out 
 
       setMessage('You stopped hovering over me.'); 
 
       timer = setInterval(remove_notice, time); 
 
      } 
 
     }); 
 

 
     html.on('click', function() { 
 
      clearInterval(timer); 
 
      callback && callback(); 
 
      remove_notice(); 
 
     }); 
 
    } 
 

 
    var notification = new Notify('This is a notification.', function() { 
 
     setMessage('You clicked my text.'); 
 
    }, function() { 
 
     setMessage('You clicked my "x".'); 
 
    }); 
 

 
}); 
 

 
function setMessage(messageText) { 
 
    $('#testMessage').text(messageText); 
 
}

#notifications { 
 
    cursor: pointer; 
 
    position: fixed; 
 
    right: 0; 
 
    z-index: 9999; 
 
    bottom: 0; 
 
    margin-bottom: 22px; 
 
    margin-right: 15px; 
 
    max-width: 300px; 
 
} 
 

 
#testMessage { 
 
    position: fixed; 
 
    right: 0; 
 
    z-index: 9999; 
 
    top: 0; 
 
    margin-top: 22px; 
 
    margin-right: 15px; 
 
    max-width: 300px; 
 
}

<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.min.js"></script> 
 

 
<div id="testMessage"></div> 
 
<div id="notifications"> 
 
<!--  <div class="alert alert-danger" role="alert"> 
 
     <a class="button close" style="padding-left: 10px;" href="#">×</a> 
 
     <i class="fa fa-info-circle "></i> 
 
     Thanks 
 
    </div> --> 
 
</div>