<!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. java内存泄漏的定位与分析

    1.为什么会发生内存泄漏 java 如何检测内在泄漏呢?我们需要一些工具进行检测,并发现内存泄漏问题,不然很容易发生down机问题. 编写java程序最为方便的地方就是我们不需要管理内存的分配和释放, ...

  2. Selenium 功能总结大集合

    slenium自动化测试的一个利器: 总结了部分功能,成图,方便学习: 这是一张大图,大家看起来可能比较麻烦: 可以在我的github下载:selenium大图.xmind格式

  3. 基于Java Mina框架的部标808服务器设计和开发

    在开发部标GPS平台中,部标808GPS服务器是系统的核心关键,决定了部标平台的稳定性和行那个.Linux服务器是首选,为了跨平台,开发语言选择Java自不待言. 我们为客户开发的部标服务器基于Min ...

  4. Babel下的ES6兼容性与规范

    前端开发 Babel下的ES6兼容性与规范   ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问 ...

  5. 。。。IO流学习之二。。。

    fileReader的用法: import static org.junit.Assert.*; import java.io.File; import java.io.FileNotFoundExc ...

  6. （转）学习使用Jmeter做压力测试(一)--压力测试基本概念

    一.性能测试的概念 性能测试是通过自动化的测试工具模拟多种正常峰值及异常负载条件来对系统的各项性能指标进行测试.负载测试和压力测试都属于性能测试,两者可以结合进行. 通过负载测试,确定在各种工作负载下 ...

  7. 比较器：Compare接口与Comparator接口区别与理解

    一.实现Compare接口与Comparator接口的类,都是为了对象实例数组排序的方便,因为可以直接调用 java.util.Arrays.sort(对象数组名称),可以自定义排序规则. 不同之处: ...

  8. Mysql复合索引

    当Mysql使用索引字段作为条件时,如果该索引是复合索引,必须使用该索引中的第一个字段作为条件才能保证系统使用该索引,否则该索引不会被使用,并且应尽可能地让索引顺序和字段顺序一致

  9. PHPExcel导出功能

    对于第一次弄这个导出,总结下思路: 1.下载在http://phpexcel.codeplex.com/下载最新PHPExcel放到Vendor下,注意位置:ThinkPHP\Extend\Vendo ...

  10. android控件的对齐方式(转)

    <?xml version="1.0" encoding="utf-8"?> <!-- android:layout_above 将该控件的底 ...