JS 第三方工具封装经典案例（弹框）

最新推荐文章于 2023-08-06 09:29:59 发布

2b勿扰

最新推荐文章于 2023-08-06 09:29:59 发布

阅读量681

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_41181778/article/details/103289010

版权

本文介绍了如何封装一个JavaScript弹框组件，包括主要的JS、HTML和CSS文件的详细内容，展示了一个完整的自定义弹框实现过程。

摘要由CSDN通过智能技术生成

弹框主要的js文件

var createMsgWin = {
   
    init(param) {
   
        var initParam = {
   
            title: '友情提示', //标题
            tips: "没有任何提示信息！", //主体内容
            btnOk: '确定', //确定按钮文字
            btnNo: '取消', //取消按钮文字
            area: ['250', '210'], //自定义弹框大小
            closeOnClickModal: true, // 是否可以通过点击modal关闭
            dir: 'RT',
            hasShade: true, //是否需要遮罩层
            isShowBtnNo: true, //是否需要显示取消按钮
            defineCls: '', //自定义样式
            funcOk: function () {
    // 点击确定执行的方法
            },
            funcNo: function () {
    // 点击取消执行的方法
            }
        };

        this.paramEnd = Object.assign({
   }, initParam, param);
        this.body = document.getElementsByTagName('body')[0];

        //遮罩层
        if (this.paramEnd.hasShade) {
   
            this.bgObj = document.createElement("DIV");
            this.bgObj.style.cssText = "width:100%;height:100%;position:fixed;z-index: 990;top: 0px;left: 0px;background: #000000;filter: alpha(Opacity=30); -moz-opacity:0.30;opacity:0.30;";
            this.body.appendChild(this.bgObj);
        }
        //   this.drawHTML(); 
        this.drawHTML2();
        this.eventFun();
        this.dragTitle();
    },
    drawHTML() {
   
        //main
        this.tipWinObj = document.createElement('div');
        this.tipWinObj.className = 'tip-window-layer';
        if (this.paramEnd.defineCls) {
   

            this.tipWinObj.classList.add(this.paramEnd.defineCls);
        }

        //top区域
        var topDiv = document.createElement('div');
        topDiv.className = 'tip-header-section';

        var titDiv = document.createElement("DIV");
        titDiv.className = 'tip-title';
        titDiv.innerHTML = this.paramEnd.title;

        var cross = document.createElement("DIV");
        cross.className = 'tip-icon-close';
        cross.innerHTML = 'X';

        var contentDiv = document.createElement("DIV");
        contentDiv.className = 'tip-main-content';
        contentDiv.innerHTML = this