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>

通知警报无效

1 个答案: