Question

我已经编写了一些自定义notify.js，以在将产品添加到wordpress网站中的购物车时触发一些通知。现在的问题是，在通知外部单击时，我无法关闭弹出窗口。我尝试了几种单击窗口功能的方法，但对我没有用。

(function(plugin) {

    var component;

    if (jQuery) {
        component = plugin(jQuery);
    }

    if (typeof define == "function" && define.amd) {
        define("notify", function(){
            return component || plugin(jQuery);
        });
    }

})
(function($){

    var containers = {},
        messages   = {},

        notify     =  function(options){

            if ($.type(options) == 'string') {
                options = { message: options };
            }

            if (arguments[1]) {
                options = $.extend(options, $.type(arguments[1]) == 'string' ? {status:arguments[1]} : arguments[1]);
            }

            return (new Message(options)).show();
        };

    var Message = function(options){

        var $this = this;

        this.options = $.extend({}, Message.defaults, options);

        this.uuid    = "ID"+(new Date().getTime())+"RAND"+(Math.ceil(Math.random() * 100000));
        this.element = $([

            '<div class="alert notify-message">',
                '<button type="button" class="close" aria-hidden="true">&times;</button>',
                '<div>'+this.options.message+'</div>',
            '</div>'

        ].join('')).data("notifyMessage", this);

        // status
        if(this.options.status == 'error') {
            this.options.status = 'danger';
        }

        this.element.addClass('alert-'+this.options.status);
        this.currentstatus = this.options.status;

        messages[this.uuid] = this;

        if(!containers[this.options.pos]) {
            containers[this.options.pos] = $('<div class="notify notify-'+this.options.pos+'"></div>').appendTo('body').on("click", ".notify-message", function(){
                $(this).data("notifyMessage").close();
            });
        }
    };


    $.extend(Message.prototype, {

        uuid: false,
        element: false,
        timout: false,
        currentstatus: "",

        show: function() {

            if (this.element.is(":visible")) return;

            var $this = this;

            containers[this.options.pos].css('zIndex', this.options.zIndex).show().prepend(this.element);

            var marginbottom = parseInt(this.element.css("margin-bottom"), 10);

            this.element.css({"opacity":0, "margin-top": -1*this.element.outerHeight(), "margin-bottom":0}).animate({"opacity":1, "margin-top": 0, "margin-bottom":marginbottom}, function(){

                if ($this.options.timeout) {

                    var closefn = function(){ $this.close(); };

                    $this.timeout = setTimeout(closefn, $this.options.timeout);

                    $this.element.hover(
                        function() { clearTimeout($this.timeout); },
                        function() { $this.timeout = setTimeout(closefn, $this.options.timeout);  }
                    );
                }

            });

            return this;
        },

        close: function(instantly) {

            var $this    = this,
                finalize = function(){
                    $this.element.remove();

                    if(!containers[$this.options.pos].children().length) {
                        containers[$this.options.pos].hide();
                    }

                    $this.options.onClose.apply($this, []);

                    delete messages[$this.uuid];
                };

            if(this.timeout) clearTimeout(this.timeout);

            if(instantly) {
                finalize();
            } else {
                this.element.animate({"opacity":0, "margin-top": -1* this.element.outerHeight(), "margin-bottom":0}, function(){
                    finalize();
                });
            }
        },

    });

    Message.defaults = {
        message: "",
        status: "default",
        timeout: 50000,
        pos: 'top-center',
        zIndex: 10400,
        onClose: function() {}
    };

    return $.notify = notify
});

将产品添加到购物车时，我会触发通知

var view_cart = jQuery('.woocommerce-message a.button').text();
  if (view_cart != '') {
     var siteUrl = "<?php echo SITE_URL ?>";
     jQuery.notify({

        // custom notification message
        message: "<i class='fa fa-check-circle'></i> Product added to cart successfully. <a href='"+siteUrl+"/cart/'>GO TO CART</a>",

        // 'default', 'info', 'error', 'warning', 'success'
        status: "success",

        // timeout in ms
        timeout: 5000,

        // 'top-center','top-right', 'bottom-right', 'bottom-center', 'bottom-left'
        pos: 'bottom-center',

        // z-index style for alert container
        zIndex: 10400,

        // Function to call on alert close
        onClose: function() {}

    });
}

在通知外部单击时需要关闭通知

Answer 1

希望我的代码对您有所帮助。
我应该有一个“ div”窗口作为弹出窗口，全部处理我的js（在示例中为jq lib）

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            //Execute on DOM ready
            $pop_btn = $('#popup-btn'); //Selects 1 Obj
            $pop_stuff = $('.popup-action'); //Selects 2 Obj

            //Binding Jq listeners
            $pop_btn.on('click', function( e ) {
                //This listener works only for static objects
                $pop_stuff.each(function() {
                    $(this).removeClass('el-hidden').addClass('el-shown');
                });
            })

            $(document).on('click', '#popup-listener-layer', function( e ) {
                //This listener works also for dinamically added objects (not needed in this case, just used to show in case)
                $pop_stuff.each(function(){
                    $(this).removeClass('el-shown').addClass('el-hidden');
                });
            });

        });
    </script>
    <style type="text/css">
        #page-title {
            position: absolute;
            top: 2.5%;
            font-size: 3vw;
        }

        #popup-listener-layer {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background-color: rgba(0, 0, 0, 0.75);
            z-index: 1;
        }

        #popup-container {
            position: absolute;
            width: 50%; height: 50%;
            background-color: white;
            z-index: 2;
        }

        .center-orr {
            left: 50%;
            transform: translateX(-50%);
        }

        .center-vert {
            top: 50%;
            transform: translateY(-50%);
        }

        .center-middle {
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
        }

        .el-hidden {
            visibility: hidden;
        }

        .el-shown {
            visibility: visible;
        }

    </style>

</head>
<body>
    <p id = "page-title" class = "center-orr">Lorem ipsum Title</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum Bla Bla Bla</p>
    <button id = "popup-btn" type="button">Open a Popup</button> 

    <!-- POPUP DIV -->
    <div id = "popup-listener-layer" class = "el-hidden popup-action"></div>
    <div id = "popup-container" class = "center-middle el-hidden popup-action">
        <p>Lorem ipsum popup</p>
        <p><bold>CLICK ANYWERE OUTSIDE ME TO CLOSE ME</bold></p>
    </div>
</body>
</html>

只需侦听popu以外但在主页上方的一层即可（我将其涂成黑色，但可以使用“ backgrounnd-color：transparent”属性将其设置为透明）。

祝你有美好的一天:)
Hele

单击通知外部，关闭通知弹出窗口

1 个答案: