1.打开aui-dialog.js

添加关闭html代码

var headerHtml = params.title ? '<div class="aui-dialog-header ddd-dialog-header">' + params.title + '<span style="position:absolute;top:0.1rem;right:0.2rem;"><i class="aui-iconfont aui-icon-close ddd-icon-close aui-dialog-close"></i></span></div>' : '<div class="aui-dialog-header ddd-dialog-header">' + self.params.title + '<span style="position:absolute;top:0.1rem;right:0.2rem;"><i class="aui-iconfont aui-icon-close ddd-icon-close aui-dialog-close"></i></span></div>';

2.给关闭按钮赋予事件

var dialogCloseButtons = document.querySelectorAll(".aui-dialog-close");
if (dialogCloseButtons && dialogCloseButtons.length > 0) {
for(var ii = 0; ii < dialogCloseButtons.length; ii++){
dialogCloseButtons[ii].onclick = function(){
self.close();
return;
}
}
}

检测包含aui-dialog-close的元素,添加onclick事件,点击后,关闭窗口。

3.完整代码如下

/**
* aui-popup.js
* @author 流浪男
* @todo more things to abstract, e.g. Loading css etc.
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function( window, undefined ) {
"use strict";
var auiDialog = function() {
};
var isShow = false;
auiDialog.prototype = {
params: {
title:'',
msg:'',
buttons: ['取消','确定'],
input:false
},
create: function(params,callback) {
var self = this;
var dialogHtml = '';
var buttonsHtml = '';
var headerHtml = params.title ? '<div class="aui-dialog-header ddd-dialog-header">' + params.title + '<span style="position:absolute;top:0.1rem;right:0.2rem;"><i class="aui-iconfont aui-icon-close ddd-icon-close aui-dialog-close"></i></span></div>' : '<div class="aui-dialog-header ddd-dialog-header">' + self.params.title + '<span style="position:absolute;top:0.1rem;right:0.2rem;"><i class="aui-iconfont aui-icon-close ddd-icon-close aui-dialog-close"></i></span></div>';
if(params.input){
params.text = params.text ? params.text: '';
var msgHtml = '<div class="aui-dialog-body"><input type="text" placeholder="'+params.text+'"></div>';
}else{
var msgHtml = params.msg ? '<div class="aui-dialog-body">' + params.msg + '</div>' : '<div class="aui-dialog-body">' + self.params.msg + '</div>';
}
var buttons = params.buttons ? params.buttons : self.params.buttons;
if (buttons && buttons.length > 0) {
for (var i = 0; i < buttons.length; i++) {
buttonsHtml += '<div class="aui-dialog-btn ddd-dialog-btn" tapmode button-index="'+i+'">'+buttons[i]+'</div>';
}
}
var footerHtml = '<div class="aui-dialog-footer">'+buttonsHtml+'</div>';
dialogHtml = '<div class="aui-dialog">'+headerHtml+msgHtml+footerHtml+'</div>';
document.body.insertAdjacentHTML('beforeend', dialogHtml);
// listen buttons click
var dialogButtons = document.querySelectorAll(".aui-dialog-btn");
if(dialogButtons && dialogButtons.length > 0){
for(var ii = 0; ii < dialogButtons.length; ii++){
dialogButtons[ii].onclick = function(){
if(callback){
if(params.input){
callback({
buttonIndex: parseInt(this.getAttribute("button-index"))+1,
text: document.querySelector("input").value
});
}else{
callback({
buttonIndex: parseInt(this.getAttribute("button-index"))+1
});
}
};
self.close();
return;
}
}
} var dialogCloseButtons = document.querySelectorAll(".aui-dialog-close");
if (dialogCloseButtons && dialogCloseButtons.length > 0) {
for(var ii = 0; ii < dialogCloseButtons.length; ii++){
dialogCloseButtons[ii].onclick = function(){
self.close();
return;
}
}
} self.open();
},
open: function(){
if(!document.querySelector(".aui-dialog"))return;
var self = this;
document.querySelector(".aui-dialog").style.marginTop = "-"+Math.round(document.querySelector(".aui-dialog").offsetHeight/2)+"px";
if(!document.querySelector(".aui-mask")){
var maskHtml = '<div class="aui-mask"></div>';
document.body.insertAdjacentHTML('beforeend', maskHtml);
}
// document.querySelector(".aui-dialog").style.display = "block";
setTimeout(function(){
document.querySelector(".aui-dialog").classList.add("aui-dialog-in");
document.querySelector(".aui-mask").classList.add("aui-mask-in");
document.querySelector(".aui-dialog").classList.add("aui-dialog-in");
}, 10)
document.querySelector(".aui-mask").addEventListener("touchmove", function(e){
e.preventDefault();
})
document.querySelector(".aui-dialog").addEventListener("touchmove", function(e){
e.preventDefault();
})
return;
},
close: function(){
var self = this;
document.querySelector(".aui-mask").classList.remove("aui-mask-in");
if (document.querySelector(".aui-dialog")) {
document.querySelector(".aui-dialog").classList.remove("aui-dialog-in");
document.querySelector(".aui-dialog").classList.add("aui-dialog-out");
} if (document.querySelector(".aui-dialog:not(.aui-dialog-out)")) {
setTimeout(function(){
if(document.querySelector(".aui-dialog"))document.querySelector(".aui-dialog").parentNode.removeChild(document.querySelector(".aui-dialog"));
self.open();
return true;
},200)
}else{
document.querySelector(".aui-mask").classList.add("aui-mask-out");
if (document.querySelector(".aui-dialog")) {
document.querySelector(".aui-dialog").addEventListener("webkitTransitionEnd", function(){
self.remove();
})
document.querySelector(".aui-dialog").addEventListener("transitionend", function(){
self.remove();
})
} }
},
remove: function(){
if(document.querySelector(".aui-dialog"))document.querySelector(".aui-dialog").parentNode.removeChild(document.querySelector(".aui-dialog"));
if(document.querySelector(".aui-mask")){
document.querySelector(".aui-mask").classList.remove("aui-mask-out");
}
return true;
},
alert: function(params,callback){
var self = this;
return self.create(params,callback);
},
prompt:function(params,callback){
var self = this;
params.input = true;
return self.create(params,callback);
}
};
window.auiDialog = auiDialog;
})(window);

方法论:

掌握js的本质,才能灵活的改造插件。

aui-dialog改造,支持关闭的更多相关文章

  1. Lightbox改造——支持滚轮缩放

    在做文章类型的web页时,经常会遇到要点开看大图的需求,LightBox2则是在众多产品中比较优秀的一款Jquery插件.配置就不细说了,今天我主要要分享的是:如何在点开大图后,可以通过鼠标滚轮来缩放 ...

  2. easyui框架中关于dialog自带关闭事件的使用

    easyui是一个开源的第三方控件库,虽然使用比较方便,但其中有些事件和样式会与其他的控件或者框架形成冲突. 今天谈一下easyui 中dialog这个控件(对话框) easyui dialog一般在 ...

  3. pinpoint改造支持查询

    原架构 改造后架构

  4. element UI dialog 固定高度 且关闭时清空数据

    解决方法:在dialog里写一个div ,div的大小设置为相对视窗的大小就行 <el-dialog title="xxx" :visible.sync="dial ...

  5. JQuery中的dialog使用介绍

    初始化参数 对于 dialog 来说,首先需要进行初始化,在调用 dialog 函数的时候,如果没有传递参数,或者传递了一个对象,那么就表示在初始化一个对话框. 没有参数,表示按照默认的设置初始化对话 ...

  6. jQuery UI dialog

    初始化参数 对于 dialog 来说,首先需要进行初始化,在调用 dialog 函数的时候,如果没有传递参数,或者传递了一个对象,那么就表示在初始化一个对话框. 没有参数,表示按照默认的设置初始化对话 ...

  7. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.6.Dialog控件

    习惯上,我们播放一条简短的信息,或向浏览者询问一个问题,都会用到dialog. 创建一个基本的dialog 使用dialog 选项 形式 启用内置动画 给dialog添加按钮 使用dialog回调函数 ...

  8. jQuery UI dialog 參数说明

    前段时间碰到个问题 jquery UI dialog弹出层 弹出多个层是 比方弹出两个层A和B  B层假设显示的数据表格太大,伸到了A层的外面,那伸到A层之外的部分就看不到了,由于B层是在A层上弹出的 ...

  9. vue--vant组件库Dialog弹出框

    安装vant UI框架: cnpm install vant –-save-dev 导入组件-在main.js里: import Vant from 'vant'; import'vant/lib/v ...

随机推荐

  1. web移动端-弹性盒模型

    (父元素加) : /*新版弹性盒模型*/ /* display: flex; */ /*设置主轴方向为水平方向*/ /* flex-direction: row; */ /*设置主轴方向为垂直方向*/ ...

  2. luogu P2137 Gty的妹子树(分块,主席树)

    询问的化我们可以建主席树.然后修改?,树套树...,最后插入?炸了. 所以我们对操作进行分块. 我们先对整棵树建一个主席树.修改,插入我们先记录下来.然后询问的时候先对主席树查询,然后暴力遍历我们记录 ...

  3. 别了WindowsXP

    生命中有太多的迎来送往,今日全世界都在告别它. 虽然自己已经在很久之前没有用XP系统了.告别它不如在一定意义上告别自己的一段时光... 2001年个人第一台电脑...初次安装XP,两张光盘一张安装盘一 ...

  4. Kneser猜想与相关推广

    本文本来是想放在Borsuk-Ulam定理的应用这篇文章当中.但是这个文章实在是太长,导致有喧宾夺主之嫌,从而独立出为一篇文章,仅供参考.$\newcommand{\di}{\mathrm{dist} ...

  5. 【BZOJ 1452】 [JSOI2009]Count

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 维护一百个二维树状数组. 二维区间求和. [代码] #include <bits/stdc++.h> #define L ...

  6. mysql-幻读及其例子

    第一步建表并插入5条记录:  接下来我们看下大部分mysql所说的幻读现象: 事务1(开启事务查询发现没有记录6准备插入):  事务2(开启事务,发现没有记录6插入,并提交事务):  事务1:查询发现 ...

  7. struts2 异常页面乱码问题

    在 struts.xml 或者 struts.properties 文件里添加 <constant name="struts.locale" value="zh_C ...

  8. poj_1195Mobile phones,二维树状数组

    #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> us ...

  9. litepal更好的操作sqlite3,配置与基本操作

    litepal更好的操作sqlite3 配置 在app下的build.gradle中加入 创建litepal.xml配置 在app/src/main下面创建assets,新建litepal.xml & ...

  10. zzulioj--1828-- 贪心的小猫咪(贪心模拟)

    1828: 贪心的小猫咪 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 14  Solved: 4 SubmitStatusWeb Board Des ...