<!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. RHEL6.5 换源

    由于redhat的yum在线更新要收费,即没有注册的无法使用:将redhat的yum卸载.重装第三方源. 第三方源包括:网易,重庆大学,epel 等Author wood_man.2015.10.2 ...

  2. SpringMVC常用配置-处理程序异常以及404错误

  3. docker 组件(c/s)

    Docker 组件 1. docker client : docker的客户端 2. docker server : docker daemon的主要组成部分,接受用户通过docker client发 ...

  4. Oracle常用操作——创建表空间、临时表空间、创建表分区、创建索引、锁表处理

    摘要:Oracle数据库的库表常用操作:创建与添加表空间.临时表空间.创建表分区.创建索引.锁表处理 1.表空间 ■  详细查看表空间使用状况,包括总大小,使用空间,使用率,剩余空间 --详细查看表空 ...

  5. WebForm——IIS服务器、开发方式和简单基础

    一.B/S和C/S 1.C/S C/S 架构是一种典型的两层架构,其全程是Client/Server,即客户端服务器端架构,其客户端包含一个或多个在用户的电脑上运行的程序,而服务器端有两种,一种是数据 ...

  6. Unity和Android互相调用

    安卓部分代码: public class GameMainActivity extends UnityPlayerActivity { private static String CODE_ROOT ...

  7. 戴尔3542安装ubuntu时出现：failed to lead ldlinux.c32

    解决办法: 1. 开机未进入系统是连续敲击F2,进入BIOS2.在 BIOS 的Boot菜单下,将Secure Boot 改为 Disabled3. 将Boot List Option 改为 Lega ...

  8. mysql 设置max_allowed_packet 大小的办法

        show VARIABLES like '%max_allowed_packet%'; 第一句是查询  max_allowed_packet  的大小,第二句是重新设定  max_allowe ...

  9. 二十六、Java--------反射

    反射 正常情况下,我们必须知道一个类的完整路径后才可以实例化对象,但是在Java也可以通过一个对象来找到其所在类的信息,这其实就是Class的功能. 可以看到此时的所有操作都是反着来,这就是反射. p ...

  10. 笔记--MySQL相关操作

    一  登录数据库 1 用户无密码: mysql -uroot -p mysql-> 2 用户有密码: MySQL -root -p[passwd] mysql-> 二  创建数据库: 查询 ...