js原型方式自定义弹窗
来源:互联网 发布:学校机房监控软件 编辑:程序博客网 时间:2024/06/06 03:09
function confirmAlert(){};
confirmAlert.prototype.make = function(title,content,falseTit,falseFn,trueTit,trueFn){
this.content = content; //自定义弹窗的内容
this.title = title || '温馨提示:'; //弹窗title
this.falseBack = falseTit || "确定"; //确定
this.falseFn = falseFn || denglu(); //点击确定的回调函数
this.trueBack = trueBack || "取消"; //取消
this.trueFn = trueFn || closealert(); //点击取消的回调函数
var self = this;
var div = document.createElement('div');
div.setAttribute('id','alert-box')
var iframe = "<div class='cover-layer'></div>"
+ "<div class='alert-box' style='width: 447px;'>"
+ "<div class='alert-th'>" + this.title + "<i class='icon-error' onclick='closeAlert()'><img src='http://huahan.oss-cn-hangzhou.aliyuncs.com/icon/alert-error.png?t=1,x-oss-process=image/resize,m_fill,h_18,w_18 '/></i></div>"
+ "<div class='alert-td' style='height: 230px;'>"
+"<div class='alert-text' style='height: 120px; top: 26%;text-align: center;padding-top:80px;line-height:30px;'>" + this.content + "</div>"
+"<div class='btn-con btn-l' onclick='"+this.falseFn+"' >"+this.falseBack+"</div><div class='btn-con btn-r' onclick='"+this.trueFn+"'>"+this.trueBack+"</div>"
+ "</div>"
+"</div>";
var body = document.getElementsByTagName('body')[0];
div.innerHTML = iframe;
body.appendChild(div);
}
//关闭弹窗
confirmAlert.prototype.close = function(){
var body = document.getElementsByTagName('body')[0];
var div = document.getElementById('alert-box');
body.removeChild(div);
window.clearTimeout(set_time);
};
var confirmalerts = new confirmAlert();
//点击关闭
function closealert(){
confirmalerts.close();
}
confirmAlert.prototype.make = function(title,content,falseTit,falseFn,trueTit,trueFn){
this.content = content; //自定义弹窗的内容
this.title = title || '温馨提示:'; //弹窗title
this.falseBack = falseTit || "确定"; //确定
this.falseFn = falseFn || denglu(); //点击确定的回调函数
this.trueBack = trueBack || "取消"; //取消
this.trueFn = trueFn || closealert(); //点击取消的回调函数
var self = this;
var div = document.createElement('div');
div.setAttribute('id','alert-box')
var iframe = "<div class='cover-layer'></div>"
+ "<div class='alert-box' style='width: 447px;'>"
+ "<div class='alert-th'>" + this.title + "<i class='icon-error' onclick='closeAlert()'><img src='http://huahan.oss-cn-hangzhou.aliyuncs.com/icon/alert-error.png?t=1,x-oss-process=image/resize,m_fill,h_18,w_18 '/></i></div>"
+ "<div class='alert-td' style='height: 230px;'>"
+"<div class='alert-text' style='height: 120px; top: 26%;text-align: center;padding-top:80px;line-height:30px;'>" + this.content + "</div>"
+"<div class='btn-con btn-l' onclick='"+this.falseFn+"' >"+this.falseBack+"</div><div class='btn-con btn-r' onclick='"+this.trueFn+"'>"+this.trueBack+"</div>"
+ "</div>"
+"</div>";
var body = document.getElementsByTagName('body')[0];
div.innerHTML = iframe;
body.appendChild(div);
}
//关闭弹窗
confirmAlert.prototype.close = function(){
var body = document.getElementsByTagName('body')[0];
var div = document.getElementById('alert-box');
body.removeChild(div);
window.clearTimeout(set_time);
};
var confirmalerts = new confirmAlert();
//点击关闭
function closealert(){
confirmalerts.close();
}
阅读全文
0 0
- js原型方式自定义弹窗
- js中数组原型Array、自定义原型函数Array.prototype
- js的对象的原型方式
- 【前端知识点】js原型继承方式详解
- Javascript深度学习(js执行过程、js继承方式、__proto__、prototype、原型与原型链)
- JS原型、原型链
- JS-原型、原型链
- JS原型,原型链
- js原型,原型链
- JS原型+原型链
- 原型设计模式prototype-构造js自定义对象
- 构造函数+原型模式构造js自定义对象
- js实现自定义事件(字面量 && 原型)
- 构造函数+原型混合方式实现js的继承
- JS 创建类---混合的构造函数/原型方式
- js 动态原型方式 实现ajax异步类
- JS的面向对象-工厂方式-原型-继承
- 【前端Js】原型继承的几种方式
- javaweb开发中常用的时间工具类
- 防止网页被嵌入iframe广告代码
- Oracle数据移动-不同用户不同表空间之间的数据移动
- Oracle闪回-闪回已经删除的表:
- JAVA复制流(Forked streams/ Forking a stream)
- js原型方式自定义弹窗
- SSM框架使用POI导出EXCEL
- Linux声卡录音程序之——mp3(通过ALSA操作声卡)
- Oracle闪回-闪回错误的DML操作
- js Base64加密
- python3 模块内置变量
- web--鼠标拖拽
- java拼接字符,数据库字符和数字拼接的字符串作为字段,如ID,主键
- python 生成器的唯一缺点 & enumerate被遗忘的start & 突然好奇in