JavaScript移动端模拟alert()方法

来源：互联网发布：淘货源软件编辑：程序博客网时间：2024/05/01 05:42

在移动端HTML5页面中，由于alert(）这个原生方法弹出框不太好看，且在各浏览器或WebView的样子不统一，我们一般会自行实现一个模拟该方法的弹出框。而且这个是一个使用频繁的方法，所以可以用JavaScript把它封装起来，便于调用。

以下是我实现代码和demo，样式可根据需要自行修改：

alert.js

(function(exports, undefined){    'use strict';    var document = exports.document;    function createDiv(class_name){        var div = document.createElement('div');        div.setAttribute('class', class_name);        document.body.appendChild(div);        return div;    }    function Alert(){        if(!(this instanceof Alert)) return;        return this;    }    Alert.prototype = {        init: function(){            this.mask = this.mask || createDiv('mask');            this.alert = this.alert || createDiv('alert');            this.initEvents.call(this);            return this;        },        show: function(message){            this.alert.innerHTML = message || '';            this.alert.style.display = this.mask.style.display = 'block';        },        hide: function(){            this.alert.style.display = this.mask.style.display = 'none';            exports.event && (exports.event.stopPropagation(), exports.event.preventDefault());        },        initEvents: function(){            this.hideHandler = this.hideHandler || this.hide.bind(this);            this.mask.addEventListener('touchend', this.hideHandler, false);        },        removeEvents: function(){            this.mask.removeEventListener('touchend', this.hideHandler, false);            this.hideHandler = null;        },        reset: function(){            this.removeEvents.call(this);            this.alert.style.display = this.mask.style.display = 'none';        }    }    var alert = new Alert().init();    exports.showAlert = alert.show.bind(alert);    exports.hideAlert = alert.hide.bind(alert);})(window);

main.css

html, body{    width: 100%;    margin: 0;    padding: 0;}html{    overflow-x: hidden;    overflow-y: auto;}ul{    list-style: none;    margin: 0;    padding: 0;}p{    padding: 0;    margin: 0;}a{    text-decoration: none;}/* mask */.mask{    width: 100%;    height: 100%;     position: fixed;    top: 0;    left: 0;    background-color: rgba(0, 0, 0, .7);    display: none;}/* alert */.alert{    box-sizing: border-box;    width: 60%;    max-height: 40%;    position: fixed;    top: 50%;    left: 0;    right: 0;    -webkit-transform: translateY(-50%);    transform: translateY(-50%);    margin: 0 auto;    padding: 10px;    background-color: #fcfcfc;    border-radius: 4px;    box-shadow: 0 0 4px;    text-align: center;    font-size: 10pt;    font-weight: normal;    word-wrap: break-word;    overflow-x: hidden;    overflow-y: auto;    display: none;}

index.html

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">    <meta content="yes" name="apple-mobile-web-app-capable">    <meta content="black" name="apple-mobile-web-app-status-bar-style">    <meta content="telephone=no" name="format-detection">    <meta content="email=no" name="format-detection">    <title>alert</title>    <link rel="stylesheet" href="./css/main.css">    <style>        #btn_showAlert{            width: 200px;            height: 30px;            line-height: 30px;            margin: 100px auto 0;            border-radius: 4px;            background-color: #428bca;            color: #fff;            font-weight: bold;            text-align: center;        }    </style></head><body>    <div id="btn_showAlert">show a message.</div>    <!-- javascript -->    <script src="./js/alert.min.js"></script>    <script>        window.addEventListener('DOMContentLoaded', function(){            initEvents();        }, false);        function initEvents(){            // btn_showAlert            document.querySelector('#btn_showAlert').addEventListener('touchend', function(){                showAlert('This is a message.');            }, false);        }    </script></body></html>

1 0