伪 alter 弹窗 +弹窗统一

你应该有遇到这种情况：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>

  这样就可以实现 在你点不同按钮的时候 不会有闪烁  同时文字变化的效果；  点击图片的任一角落都会关闭这个弹窗。

   暂时不会弄动图 所以不能显示给各位看了  上截图
  

 　

posted @ 2017-01-12 16:46  严芷云  阅读(446)  评论(0)  编辑  收藏  举报