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

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

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

　

伪 alter 弹窗 +弹窗统一的更多相关文章

  1. python+selenium基础篇，弹窗处理

    1.弹窗如下图所示 2.处理方法 from selenium.webdriver.common.action_chains import ActionChains#导入鼠标操作包 from selen ...

  2. windev的弹窗详情页滚动条实现方法以及弹窗尺寸规划

    按照企业信息系统的设计习惯,我们一般将信息以列表的方式在主窗口展现,同时设置需要展现的字段,一些系统会将这个窗口称为总表页.列表页等.而信息的编辑或完整信息的查询,一般通过一个弹窗来实现,一些系统会将 ...

  3. easyui里弹窗的两种表现形式

    easyui里弹窗的两种表现形式 博客分类: jQueryEasyUi   1.主JSP页面中描绘弹窗   <div id="centerDiv" data-options= ...

  4. No.7 selenium学习之路之Alert弹窗

    Alert弹窗 弹窗是用工具选不到的~ 切换到alert driver.switch_to_alert() 新的语法:driver.switch_to.alert 注:新的语法不需要后面加括号 打印a ...

  5. Smobiler实现手机弹窗

    前言 在实际项目中有很多场景需要用到弹窗,如图1 那么这些弹窗在Smobiler中如何实现呢? 正文 Smobiler实现弹窗有两种方式:1.MessageBox.Show 2.ShowDialog和 ...

  6. Javascript的内容

    JS简介和变量 {JS的三种方式}            1 HTML中内嵌JS(不提倡使用)            <button onclick="javascript:alert ...

  7. Javascript的内容摘要

    JS简介和变量 {JS的三种方式}            1 HTML中内嵌JS(不提倡使用)            <button onclick="javascript:alert ...

  8. web项目开发最佳做法

    一个成熟的web项目应该具备以下基础代码或做法 1.前端基础框架: 统一的ajax 通信/表单提交及调用结果弹窗显示 统一的数据验证 统一的数据列表 2.后端基础框架: 统一的异常处理捕获,可针对具体 ...

  9. 2022年Web前端开发流程和学习路线（详尽版）

    前言 前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理.理论上,面向用户的产品里,所有问题(包括产品.设计.后端.甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题 ...

随机推荐

  1. sql2005还原超长sql脚本，还原超大脚本文件

    原文:sql2005还原超长sql脚本,还原超大脚本文件 从外网把数据库用导出脚本的方式导出来了,280M的样子,导是导出来了,但是在本机执行sql脚本的时候,直接就是out of memory,之前 ...

  2. SQLServer 分组查询相邻两条记录的时间差

    原文:SQLServer 分组查询相邻两条记录的时间差 首先,我们通过数据库中表的两条记录来引出问题,如下图 以上为一个记录操作记录的表数据.OrderID为自增长列,后面依次为操作类型,操作时间,操 ...

  3. mysql主从同步配置(windows环境)

    mysql主从同步配置(mysql5.5,windows环境)   A主机(作为主服务器)环境:windows8.mysql5.5 ip:192.168.1.100(自己填) B主机(作为从服务器,由 ...

  4. CSS3中文手册基础知识

    CSS3手册是学习CSS3的最佳文档,不管是自己写博客,还是买书,手册少不了.今天我给大家介绍一些CSS3有哪些分类及其使用. 具体参考:http://caibaojian.com/css3/ 上来进 ...

  5. C#编程总结

    C#编程总结--总目录 多年的C#实战经历,希望通过一个系列课程对C#编程做系统总结. 总结过去,展望未来.新的一年,新的征程,新的开始! 希望我们在2014梦想成真,马到成功! 1.C#编程总结(一 ...

  6. WPF界面按钮美化

    在App.xaml里加入全局按钮样式 <Application x:Class="WpfButton.App" xmlns="http://schemas.micr ...

  7. 关于sscanf函数的各种详细用法

    看书的时候碰到sscanf函数,就上网查了很多资料,并加以自己的整理,希望对大家有所帮助. (因为参考的博客太多太散,就不一一注明,望大神们见谅) sscanf()  :从一个字符串中读进与指定格式相 ...

  8. mac 下安装oh my zsh

    1.直接从github上下载 git clone git://github.com/robbyrussell/oh-my-zsh.git ~/.oh-my-zsh  2.拷贝到账户目录下 cp ~/. ...

  9. [转]Breaking Bad With DTrace

    Source:http://initwithfunk.com/blog/2013/05/31/breaking-bad-with-dtrace/ I’ve spent an unwise amount ...

  10. 【CSS】圆角阴影边框CSS

    .someClassName { width:300px; display: inline-block; padding: 5px 10px 6px; text-decoration: none; b ...