伪 alter 弹窗 +弹窗统一

最新推荐文章于 2022-11-01 00:13:00 发布

avn68563

最新推荐文章于 2022-11-01 00:13:00 发布

阅读量415

点赞数

原文链接：http://www.cnblogs.com/SWSHBON/p/6278886.html

版权

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

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

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

转载于:https://www.cnblogs.com/SWSHBON/p/6278886.html

avn68563

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
伪 alter 弹窗 +弹窗统一

你应该有遇到这种情况：alert() 在手机上面显示的时候反正是不好看有的时候就只看到一个白色的框看不到提示信息反正很反人类这时候我觉得马上会有产品跟你说这个要改掉。然后我就遇上了这个使命，当时一想这就是一个<div> 弹窗就可以解决的问题事实就是这么简单。如果你所需要统一所有的这些窗口的时候那就要加一行代码了。并且这些信...
复制链接

扫一扫