<!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. 学霸数据处理项目之数据处理网页以及后台以及C#代码部分开发者手册

    写在前面,本文将详细介绍学霸数据处理项目中的数据处理网页与后台函数,以及c#代码中每一个方法的意义及其一些在运行方面需要注意的细节,供开发人员使用,开发人员在阅读相关方法说明时请参照相关代码,对于本文 ...

  2. test [ ] 四类

    test可理解的表达式类型分为四类:     表达式判断     字符串比较     数字比较     文件比较 test xxx 可以简写成 [  xxx  ] 的形式,注意两端的空格.   1)判 ...

  3. shell中{}的妙用

    shell中${}的妙用   1. 截断功能 ${file#*/}:       拿掉第一条/及其左边的字符串:dir1/dir2/dir3/my.file.txt ${file##*/}:    拿 ...

  4. setTimeout调用带参数的函数的方法

    function test(s){    alert(s);}window.setTimeout(function(){test('str');},1000);这样就可以了...为什么是这样呢.因为s ...

  5. Docker应用程序容器技术_转

    转自:百度百科 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相 ...

  6. 如何删除NSDictionary或NSArray中的NSNull

    前段时间与某公司的技术交流,被问到一个问题,如何删除NSDictionary中的NSNull.当时在纸上写,以前太依赖Xcode编译器了,以至于方法名都写不全,最终也没写出来,我想我肯定被鄙视的体无完 ...

  7. [CC]点云密度计算

    包括两种计算方法:精确计算和近似计算(思考:local density=单位面积的点数 vs  local density =1/单个点所占的面积) 每种方法可以实现三种模式的点云密度计算,CC里面的 ...

  8. ReactiveX编程范式

    ReactiveX http://reactivex.io/ An API for asynchronous programmingwith observable streams The Observ ...

  9. 更改android AVD模拟器创建路径位置的方法

    打开:计算机-->系统属性-->环境变量—>在“系统变量”那选择“新建”-->变量名为 "ANDROID_SDK_HOME” (注意,必须为这个名字!),然后把变量值 ...

  10. ZOJ 2412 Farm Irrigation

    Farm Irrigation Time Limit: 2 Seconds      Memory Limit: 65536 KB Benny has a spacious farm land to ...