你应该有遇到这种情况：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>
这样就可以实现 在你点不同按钮的时候 不会有闪烁 同时文字变化的效果； 点击图片的任一角落都会关闭这个弹窗。
暂时不会弄动图 所以不能显示给各位看了 上截图
