jquery弹窗组件修改（踩坑记录）一、$.confirm()确定及取消操作没反应二、$.confirm样式遇到的问题三、监听弹框加载遇到的问题四、解决方法

89 阅读 0 评论 59 点赞

我是靠谱客的博主愉快小笼包，最近开发中收集的这篇文章主要介绍jquery弹窗组件修改（踩坑记录）一、$.confirm()确定及取消操作没反应二、$.confirm样式遇到的问题三、监听弹框加载遇到的问题四、解决方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、$.confirm()确定及取消操作没反应

二、$.confirm样式遇到的问题

三、监听弹框加载遇到的问题

四、解决方法

事情是这样的，之前用vue打包好的项目被嫌弃占内存偏大，要求用原生js重新编写页面，然后就开启了与jq斗智斗勇的过程。其中，用到与el-ui中this.$confirm与this.$notify相似的弹框组件，下面放两张图感受一下：

el-ui: ① dialog对话框（this.$confirm）
在这里插入图片描述
②notification通知（this.$notify）

el-ui你可以随便使用他造好的轮子，调用也非常简单。然而原生js，搞的是一言难尽啊…

项目需求：页面中几个重要按钮，点击时需询问用户，采用dialog对话框那种遮罩弹框的样式；右下角图表模块，当后台传输的alarmType值为3时，需右侧弹框显示，采用notification，一个右下角可关闭弹框的形式。

网上搜索一大堆，锁定了两个插件：$.confirm和$.dialog分别代替原按钮弹框和右侧警告弹框。
参考的网址：https://www.jq22.com/demo/jqueryConfirm20160413/

接下来开始踩坑。。。

一、$.confirm()确定及取消操作没反应
点击前往jquery-confirm官网
问题代码示范：

$.confirm({
    title: '提示',
    content: '是否继续操作!',
    confirm: function(){
        $.alert('Confirmed!');
    },
    cancel: function(){
        $.alert('Canceled!')
    }
});

开心的照网上例子一通操作，然后点击发现两个按钮啥事没发生
事实证明confirm，cancel根本没生效，网上千篇一律同样写法看的我人都傻了！
所以，为什么参考网址能生效，我的就不行？然后在控制台查看对应版本，好家伙，jquery-1.11.1，jquery-confirm-2.5.1版。我的jq-2.1.4，jquery-confirm-3.3.4版。该引入的文件都有，估计就是版本问题了。
替换老旧版本是不可能的，我整个框架都是jq-2.1.4。仔细寻找发现原来应该这样写：
有效写法示范：

    $.confirm({
      title:'提示',
      content:'是否继续操作？',
      buttons:{
        cancel:{
          text:'取消',
          btnClass:'my-button',//通过类名绑定，可自定义按钮样式
          action:function(){
          	alert('点击了取消按钮')
          }
        },
        confirm:{
          text:'确定',
          btnClass:'my-button my-button-confirm',//通过类名绑定，可自定义按钮样式
          action:function(){
            alert('点击了确定按钮')
          }
        }
      }
    })

ps：原来我与正确答案只差一个buttons对象包裹，上面两种代码都是正确的，但一定要根据自己的版本对症下药，多看看官网！！！

二、$.confirm样式遇到的问题
这个问题看起来挺简单，直接打开控制台复制黏贴css，实在改不了加!important不就行了吗？然而，当你一个页面用到多个jq弹框这样的插件就崩溃了。

jq中$.confirm()、$.alert()、$.dialog用到的dom结构相似、css类相同，都是半透明背景加一个框，每次调用会在body末尾追加一个元素，这也就导致以下问题：

1、无法绑定唯一标识，例如id。官网有绑定元素的confirm（$('div').confirm(){...}），但只作用于元素触发弹框事件（帮你省略一行click代码），和显示区域没关系。

2、直接css复制类名覆盖样式，所有弹框都会受影响（解决办法转三）。官网有修改部分css的参数操作，对于我的项目并不能完全满足。

3、设置弹框位置position参数我这里始终失效，试过值为字符串或数组，甚至看某贴引入jquery.position.js文件都没作用

三、监听弹框加载遇到的问题
鉴于二提出的问题，只能先加载完弹框，然后单独设置样式
1、监听加载问题
（1）$(document).ready(function(){…})监听的是document是否加载完毕，无法监听单个元素。如以下写法是不可行的，最终监听的还是document。而且如果你代码里写过ready()，这里还会将你之前的操作覆盖
错误示例：

$('div').ready(function(){...})//无法监听div,打印结果还是document

（2）懒加载promise不适用，由于组件是封装好的，你没有办法传入resolve并执行，resolve()写在调用组件代码后亲测无效

四、解决方法
1、步骤一：监听弹框加载完成
这里采用了axl234博主的方法，转载于https://www.cnblogs.com/axl234/p/3808091.html
以下是我个人的注释解析：

		$('#box').wait(function(){
			console.log()
		})
				jQuery.fn.wait = function (func, times, interval) { //jq原型链添加wait方法
    	var _times = times || -1, //设置检测次数
    	_interval = interval || 20, //设置检测间隔
    	_self = this, //指向当前作用域
    	_selector = this.selector, //返回传给jquery的原始选择器，即你用什么选择器来找这个元素的,比如$('.box')是类选择器,$('#box')是标签选择器,$('div')是标签选择器,打印将是一个字符串（分别是'.box'，'#box'，'div'）
    	_iIntervalID; //定时器id
    	if( this.length ){ //一个jq对象有length属性，并不是它是个数组，而是.length出来的属性，如.name的属性，是jq-》obj自带的，帮我们统计元素数量。如果已经获取到了，就直接执行函数
    	    func && func.call(this);//如果传递的方法函数存在执行传进来的函数，并且将函数的指向改成当前wait函数域
    	} else {
    	    _iIntervalID = setInterval(function() {
    	        if(!_times) { //如果检测几遍完成，那就清除定时器
    	            clearInterval(_iIntervalID);
    	        }
    	        _times <= 0 || _times--; //	每检测一次剩余检测次数减一
    	        _self = $(_selector); //再次选择，jq元素
    	        if( _self.length ) { //判断是否能取到元素
    	            func && func.call(_self);//如果有执行方法则执行（.call()会引起执行）
    	            clearInterval(_iIntervalID);//取到了就清除定时器
    	        }
    	    }, _interval);
    	}
    	return this;
		}

2、步骤二：设置新的css样式
需要注意，通过jq.css()修改属性样式，直接写值+!important是无效的。比如背景色：

$("#box").css("background","red!important")

这样写不止important没效果，连背景色变红都不起作用（亲测）
（1）用cssText属性设置
推荐一篇介绍很全面的文章：https://www.cnblogs.com/majingyi/p/6840818.html
以上设置背景色可以写成：

$("#box").css("cssText","background:red!important;")

这样就能起作用了。同时，还可以通过cssText设置多条属性，比如：

$("#box").css("cssText","background:red!important;font-size:12px;")

即你在css文件里怎么写，cssText的值就怎么写。

（2）用cssText修改$.confirm()样式示范
以我的项目为例，按钮弹框弹出比较多且样式统一，我就在css文件中直接覆盖原来的样式。右下角警告弹框使用的jq.dialog，特点为：①背景色透明、②位置居页面右下角且离顶部一段距离、③警告信息内容为红色加粗字体

$('.jconfirm').wait(function(){
   $('.jconfirm.jconfirm-white .jconfirm-bg, .jconfirm.jconfirm-light .jconfirm-bg').css('cssText','background-color:#fff;opacity:0!important');
   $('.col-md-offset-4,.jconfirm .col-sm-offset-3,.jconfirm  .col-xs-offset-1').css('cssText','margin-left:auto!important;');
   $('.jconfirm .jconfirm-box-container').css('cssText','float:right!important;');
   $('.jconfirm .container').css('cssText','margin-right:0;');
   $('.jconfirm .jconfirm-content').css('cssText','color:red;font-weight:bold;font-size:16px;')
   $('.jconfirm .jconfirm-holder').css('cssText','margin-top:10%;');
})