<!DOCTYPE html>

<head>

<meta charset="utf-8" />

<title>拉伸效果</title>

<style>

.mask50 {

    width: 100%;

    height: 100%;

    position: fixed;

    top: 0;

    left: 0;

    z-index: 10000;

    background: rgba(0, 0, 0, .5);

    overflow: auto;

}

.js-alertFn {

    width: 9.36rem;

    position: absolute;

    z-index: 11111;

    background: #ffffff;

    left: 50%;

    top: 50%;

    margin-left: -4.68rem;

    -webkit-border-radius: .2rem;

    -moz-border-radius: .2rem;

    border-radius: .2rem;

    overflow: hidden;

}

.js-alertFn table {

    border-collapse: collapse;

    width: 100%;

    border: .01rem solid #fff;

    margin-left: -1px;

    height: 100px

}

.js-alertFn table tr td {

    border-top: 1px solid #d4d4d4;

    border-left: 1px solid #d4d4d4;

    text-align: center;

    padding: .2rem .4rem;

    line-height: .8rem;

    font-size: .5rem;

    color: #333;

    padding: 1rem .3rem;

}

.js-alertFn table tr:last-child td {

    height: 1rem;

    width: 50%;

    padding: .3rem !important;

}

</style>

</head>

<body>

<button onclick="selfAlert({})">确定</button>

</body>

</html>

<script type="text/javascript">

!function(a){function b(){ var b=g.getBoundingClientRect().width;a.rem=b/10.8,g.style.fontSize=a.rem+"px"}var g=a.document.documentElement,e;a.addEventListener("resize",function(){clearTimeout(e),e=setTimeout(b,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(e),e=setTimeout(b,300))},!1),b()}(window);

//弹出框方法

function alertFn(jn) {

    this.json = {

        msg : jn.msg || "系统错误",

        btntxt : jn.btntxt || [ '确定', '取消' ],

        type : jn.type || 2,

        sure : jn.sure,

        cancell : jn.cancell

    }

    this.init();

    this.DOMlayout();

}

alertFn.prototype.init = function() {

    var mask = document.querySelector("#mask");

    if (mask) {

        mask.parentNode.removeChild(mask);

    }

}

alertFn.prototype.DOMlayout = function() {

    var self = this;

    var mask = document.createElement("div");

    mask.className = "mask50";

    mask.setAttribute("id", "mask")

    if (this.json.type === 1) {

        var alertBox = '<div class="js-alertFn"><table><tr>';

        alertBox += '<td colspan="2">' + this.json.msg + '</td></tr>';

        alertBox += '<tr><td id="cancel">' + this.json.btntxt[1]

                + '</td><td id="sure">' + this.json.btntxt[0] + '</td></tr>';

        alertBox += '</table></div>';

    } else {

        var alertBox = '<div class="js-alertFn"><table><tr>';

        alertBox += '<td>' + this.json.msg + '</td></tr>';

        alertBox += '<tr><td id="sure">' + this.json.btntxt[0] + '</td></tr>';

        alertBox += '</table></div>';

    }

    mask.innerHTML = alertBox;

    document.body.appendChild(mask);

    this.vm();

    document.querySelector("#sure").onclick = function() {

        self.sureFn()

    }

    var canBtn = document.querySelector("#cancel");

    if (canBtn) {

        canBtn.onclick = function() {

            self.cancellFn()

        }

    }

}

alertFn.prototype.vm = function() {

    var box = document.querySelector(".js-alertFn");

    var h = box.offsetHeight;

    var mh = document.querySelector("#mask").offsetHeight;

    box.style.top = (mh - h) / 2 + "px";

}

alertFn.prototype.sureFn = function() {

    this.init();

    this.json.sure && this.json.sure();

}

alertFn.prototype.cancellFn = function() {

    this.init();

    this.json.cancell && this.json.cancell();

}

function selfAlert(json) {

    return new alertFn(json);

}

</script>

alert效果的更多相关文章

  1. 实现js的类似alert效果的函数

    这个简单的类似alert的函数,效果还行,至于css样式,那没的说了,笔者确实尽力了,如果读者觉得太烂,你可以随便改函数的样式的,反正,笔者觉得还可以,呵呵. <!DOCTYPE html PU ...

  2. alert 替代效果smoke.js

    在一些表单等需要弹窗提醒的时候,每个浏览器都有一个alert(),comfirm()函数能弹出信息,但是浏览器的自带的这种效果样式不统一,而且都固定在页面顶部: smoke.js轻量级的JS插件,他标 ...

  3. 原生js实现自定义alert风格和实现

    2018年6月29 最新更新 添加函数节流,解决多次点击问题,添加单例模式,提高代码性能. <!DOCTYPE html> <html lang="en"> ...

  4. 弹出框美化 alert样式美化

    引用style.css和ui.js就可以直接用以下接口调用!(文末附完整代码) alert_带标题: mizhu.alert('alert_带标题', '这是alert效果'); alert_带图标: ...

  5. js的常用场景效果

    转自https://www.cnblogs.com/tangdiao/p/9481681.html 1.checkbox的使用场景,学习之后就是购物车页面的自动计算的上手示例. 做成给checkbox ...

  6. 茗洋Easy UI 1.3.2 部分问题解决系列专题[Combo模糊匹配中文问题 修复]

    本次给大家带来的EasyUI的我研究拓展的新特性 我使用的是  EasyUI 1.3.2版本的,项目是ASP.NET MVC3,但是本篇讲解用不上ASP.NET MVC,仅仅修改官方Demo你就知道怎 ...

  7. Easyui弹出窗体在iframe的父级页面显示

    今天做EasyUI学习的预到了一个这样的问题:通过iframe加载的一个页面在调用$.messager.alert();这个方法后只能在iframe中显示alert效果而不是在全局的页面上显示这并不我 ...

  8. Combo模糊匹配中文问题

    茗洋Easy UI 1.3.2 部分问题解决系列专题[Combo模糊匹配中文问题 修复] 本次给大家带来的EasyUI的我研究拓展的新特性 我使用的是  EasyUI 1.3.2版本的,项目是ASP. ...

  9. JQuery中根据表单元素动态拼接json 字符串

    // <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

随机推荐

  1. PHP会话管理：cookie和session

    PHP会话管理1.cookie数据存储在浏览器端方便与JavaScript交换数据方便获取用户信息风险-浏览器可能会禁用cookie替代方案-URL参数 2.session数据存储在服务器高效.安全. ...

  2. web app上传图片

    很就很久以前,web app上传图片需要通过cordova插件,那时候好像还叫phonegap. 后来一个html标签就可以了 <input type="file" clas ...

  3. Android 基于Android的手机邮件收发（JavaMail）之一（准备工作）

    界面一共是五个界面,分别是welcomeActivity,ReceiveAndSendActivity,ReceiveListActivity,SendMailActivity,MailDetails ...

  4. T4

    Text Template Transformation Toolkit T4语法感觉有点像aspx的视图模板<% %>. 使用可以通过VS扩展和更新安装"T4 Toolbox ...

  5. C语言pow函数编写

    C语言pow函数编写 #include<stdio.h> double chaoba(double f,double q); //声明自定义函数 void main(void) { dou ...

  6. linux centos service 参数详解

    Service文件 开门见山,直接来看两个实际的服务配置文件吧. 第一个配置是 CoreOS 系统中 Docker 服务的 Unit 文件,路径是 /usr/lib/systemd/system/do ...

  7. 【皇甫】☀ 图_substring

    substring是啥?

  8. UVALive 7141 BombX（离散化+线段树）（2014 Asia Shanghai Regional Contest）

    题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&category=6 ...

  9. Windows服务安装与卸载

    Windows服务安装与卸载,使用到了InstallUtil.exe 安装: c: cd "C:\Windows\Microsoft.NET\Framework\v4.0.30319&quo ...

  10. Ubuntu/linux 有关权限修改的命令

    chmod更改文件权限命令 最常用的基础命令chmod chmod 777  目录名(路径名) 777 三位数字分别代表 user.group.others 的权限,可读(r).可写(w).可执行(x ...