js公共弹出窗插件

Posted 故事里的牧羊人

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js公共弹出窗插件相关的知识,希望对你有一定的参考价值。

/*错误提示框*/
var wr = function() {
    var wrap = ‘<div class="wrapBox opacity">&nbsp;</div>‘;
    var callback;
    var me = this;
    var htmlBox = ‘<div class="alertBox opacity"></div>‘;
    // 遮罩显示
    me.faIn = function faIn(callback) {
        $(‘body‘).append(wrap);
        $(wrap).fadeIn(150, function() {
            $(‘.bodyBox‘).addClass(‘overAuto‘);
            if (callback) {
                callback();
            }
            ;
        });
    };
    // 遮罩隐藏
    me.faOut = function(callback) {
        $(‘.wrapBox‘).fadeOut(150, function() {
            $(‘.bodyBox‘).removeClass(‘overAuto‘);
            if (callback) {
                callback();
            }
            ;
            $(this).remove();
        });
    };
    // 公共提示框
    me.alert = function(message, callback) {
        if(message){
            var pHtml = ‘<p>‘ + message + ‘</p>‘;
            var inhtml = $(htmlBox).append(pHtml);
            $(‘body‘).append(inhtml);
            $(inhtml).fadeIn(250, function() {
                setTimeout(function() {
                    $(inhtml).fadeOut(150, function() {
                        $(this).html(‘‘);
                        $(this).remove();
                    });
                    if (callback) {
                        callback();
                    }
                }, 2000);
            });
        }

    };

    me.alertHide=function(){
        $(‘body‘).find(‘.alertBox‘).fadeOut(0,function(){
            $(this).html(‘‘);
            $(this).remove();
        });
    };

    // 电话
    me.tel = function(tel, callback) {
        var tel = ‘<p class="telBox"><a href="tel:‘ + tel + ‘">‘ + tel
            + ‘</a></p>‘;
        if (callback) {
            callback();
        }
        $(‘body‘).append(htmlBox);
        $(‘body‘).append(tel);
        $(htmlBox).fadeIn(250);
        $(‘.alertBox‘).click(function() {
            $(‘.telBox‘).fadeOut(150, function() {
                $(this).remove();
            });
            $(this).fadeOut(0, function() {
                $(this).html(‘‘);
                $(this).remove();

            });
        });
    };
};
var wrap = new wr();

 

以上是关于js公共弹出窗插件的主要内容,如果未能解决你的问题,请参考以下文章

百度js地图实现列表与地图上的标注点的联动效果。即点击列表中的一列,实现地图上的标注高亮显示且弹出窗

js为啥按下ente后swal弹出窗消失

wpf 右下角弹出窗

AngularJS页面uib-dropdown控件在模态窗口(弹出窗)中无法使用问题

flutter 实现弹出窗 点击下拉栏 微信右上角弹出窗

DuiVision开发教程(18)-弹出窗