你应该有遇到这种情况:alert() 在手机上面显示的时候 反正是不好看 有的时候就只看到一个白色的框 看不到提示信息 反正很反人类 这时候我觉得 马上会有产品跟你说 这个要改掉。
然后我就遇上了这个使命,当时一想这就是一个<div> 弹窗就可以解决的问题 事实就是这么简单 。
如果你所需要 统一所有的这些窗口的时候 那就要加一行代码了 。并且这些信息是可以变动的。
接下来我们就写起来吧:
上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.tips { background-image: url(img/nnTips.png); left: 63% ; top: 65%; text-align: center;
display: none; width:300px; height: 170px; margin:-201px 0 0 -272px; position: absolute;}
.tips h3{ text-align:center; line-height: 50px; }
</style>
</head>
<body>
<div>
<ul>
<li ><button onclick="alertWin('这个是测试弹框 你咬我啊')">测试弹框</button></li>
<li id="win"><button onclick="showWin('wintest')">赢钱弹框</button></li>
<li id="error"><button onclick="showWin('errortest')">错误弹框</button></li>
<li id="show"><button onclick="showWin('showtest')">嘚瑟弹框</button></li>
</ul> </div>
<div id="test" class="tips" onclick="closeWin('test')">
<h3 id="tips"> </h3>
</div>
<div id="wintest" class="tips" onclick="closeWin('test')">
<h3 id="tips"> win win win </h3>
</div>
<div id="errortest" class="tips" onclick="closeWin('test')">
<h3 id="tips"> 来咬我啊</h3>
</div>
<div id="showtest" class="tips" onclick="closeWin('test')">
<h3 id="tips">嘚瑟弹框 show show show time </h3>
</div>
</body>
<script>
wait=false;
/*动态输入字符的*/
function alertWin($msg) {
document.getElementById("tips").innerHTML = $msg;
showWin("test");
}
// 按需求弹出框的
function showWin($winId) {
if (wait==false) {
var $wList = ["test", "wintest", "errortest", "showtest"];
for (var j = 0; j < $wList.length; j++) {
if ($wList[j] != $winId) document.getElementById($wList[j]).style.display = "none";
}
}
else wait = true;
document.getElementById($winId).style.display = "block";
}
//关闭弹窗
function closeWin($winId) {
wait = false;
document.getElementById("tips").innerHTML='';
document.getElementById($winId).style.display = "none"; } </script> </html>
这样就可以实现 在你点不同按钮的时候 不会有闪烁 同时文字变化的效果; 点击图片的任一角落都会关闭这个弹窗。
暂时不会弄动图 所以不能显示给各位看了 上截图