JavaScript移動端模擬alert()方法
阿新 • • 發佈：2019-02-04
在移動端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' 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>