JavaScript移动端模拟alert()方法

最新推荐文章于 2024-07-03 00:41:29 发布

herbertyoung

最新推荐文章于 2024-07-03 00:41:29 发布

阅读量7.7k

点赞数 1

分类专栏： JavaScript 文章标签： javascript alert

本文链接：https://blog.csdn.net/yhb241/article/details/48318081

版权

JavaScript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

在移动端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>