<!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. 让超出父视图范围的子视图响应事件，在UIView范围外响应点击

    /** *  在父视图中重写该方法,这样可使超出部分响应事件. */ - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {  ...

  2. linux 查找文件的命令

    http://www.ruanyifeng.com/blog/2009/10/5_ways_to_search_for_files_using_the_terminal.html

  3. 导入csv文件到mysql

    原文 给自己做备份的,高手们请忽略. 数据太大,用数据库客户端软件直接导入非常卡,还是直接执行SQL吧. 1.指定文件路径. 2.字段之间以逗号分隔,数据行之间以\r\n分隔(我这里文件是以\n分隔的 ...

  4. kali 下文件操作

    记得看到一片文章中说要学习linux 不要用kali.. 不感兴趣的东西,还指望我去搞个Ubuntu.... Ctrl+I 清屏 CD命令: cd 进入用户主目录: cd ~ 进入用户主目录: cd ...

  5. 服务器支持AspJpeg和JMail45_free.msi组件

     解决办法: 1.在服务器上安装上AspJpeg和JMail45_free.msi后, 2.在cmd中输入regsvr32 c:/windows/SysWOW64/aspjpeg.dll 3.把网站对 ...

  6. CCNET+MSBuild+SVN实现每日构建

    最近开始将源代码迁移到SVN,于是便考虑到如何从SVN定期获取源码,自动编译并部署以减轻工作量并提高工作效率.通过多方搜集资料并进行研究,基本实现了这个功能.对于每日构建的概念就不具体展开了,可以在各 ...

  7. C++之动态数组

    C99支持一种名为变长数组的结构来方便程序员.C++也提供了一种长度可在程序运行时确定的数组类型:动态数组.声明格式为:(声明 int 类型的数组) ; //此处可修改 ArraySize 的值 in ...

  8. 我的archlinux中安装的关于xfce4的软件

    包括一些panel的插件: xfce4-appfinder - xfce4-battery-plugin - xfce4-eyes-plugin - xfce4-mixer - xfce4-netlo ...

  9. 【转】移动前端不得不了解的html5 head 头标签

    来源:http://blog.csdn.net/huang100qi/article/details/42596799 本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head ...

  10. C++ new和delete具体操作符是怎样的

    在C语言中,动态分配内存用 malloc() 函数,释放内存用 free() 函数.如下所示: int *p = (int*) malloc( sizeof(int) * 10 ); //分配10个i ...