JavaScript移动端模拟alert()方法

72 阅读 0 评论 48 点赞

我是靠谱客的博主机智龙猫，最近开发中收集的这篇文章主要介绍JavaScript移动端模拟alert()方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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