你应该有遇到这种情况：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. .NET Reflector 7.6.1.824安装及破解（刚试了，绝对能用）

    首先下载在这里http://download.csdn.net/detail/gattaca2011/4578752,不要到官网去了,由于官网已经是8.0了. 然后就是安装,执行注冊机(注意断网),详 ...

  2. 关于安装Redmine服务启动和邮件设置

    关于安装Redmine服务启动和邮件设置 分类: Redmine2009-06-01 10:37 5658人阅读 评论(0) 收藏 举报 authentication邮件服务器serviceexcha ...

  3. 【值得收藏】绘图工具Origin的学习资料汇编【可免费下载】

    Origin使用教程 Origin为OriginLab公司出品的较流行的专业函数绘图软件,是公认的简单易学.操作灵活.功能强大的软件,既可以满足一般用户的制图需要,也可以满足高级用户数据分析.函数拟合 ...

  4. 仿async/await（一）and Gulp：新一代前端构建利器

    NET 4.5的async/await真是个神奇的东西,巧妙异常以致我不禁对其实现充满好奇,但一直难以窥探其门径.不意间读了此篇强文<Asynchronous Programming in C# ...

  5. VS2010生成安装包制作步骤

    VS2010生成安装包制作步骤   在VS2010中文旗舰版本中生成winForm安装包,可以复制你电脑中的开发环境,避免你忘记了一下配置然后在别的机器上运行不起来.也省去了Framwork的安装. ...

  6. 模板方法（Template）模式

    模板方法(Template)模式 前言 前段时间在亚马逊买了一本<CLR>的书,当时搞活动买一送一,然后挑了一本<漫谈设计模式>,一位不相识的大牛写的,这几天闲来无事,翻了几页 ...

  7. RabbmitMQ集群搭建流程

    参考资料 1.rabbmitMQ集群搭建http://my.oschina.net/guol/blog/186445http://blog.ftofficer.com/2010/03/translat ...

  8. 实现栈最小元素的min函数

    #include<iostream> #include<stack> using namespace std; class min_stack { public: void p ...

  9. JVM内存划分

    JVM内存划分吗? 前言: 大家都知道虚拟机,都知道JVM,其实这些都是基于sun公司[oracle公司]的HotSpot虚拟机,当然本篇博文也是以sun公司为基础.还有其他的虚拟机,常见的就有JRo ...

  10. MVC TO LINQ

    // // GET: /Home/ TestTryEntities Db = new TestTryEntities(); public ActionResult Index() { return V ...