你应该有遇到这种情况：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. 记第五届山东省ACM程序设计比赛——遗憾并非遗憾

    记第五届山东省ACM程序设计比赛 5月10日上午9点半左右,我们的队伍从学校出发,一个多小时后到达本次比赛的地点-哈尔滨工业大学. 报道,领材料,吃午饭,在哈工大的校园里逛了逛,去主楼的自习室歇息了一 ...

  2. Mysql插入内容过长（Packet for query is too large）

    原文:Mysql插入内容过长(Packet for query is too large) 这个以前一直没有碰到过,一次性向Mysql数据库插入内容过长的话会出现这个问题,解决办法就是在Mysql配置 ...

  3. 处理程序“svc-Integrated”在其模块列表中有一个错误模块“ManagedPipelineHandler”

    HTTP 错误 404.3 - Not Found 由于扩展配置问题而无法提供您请求的页面.如果该页面是脚本,请添加处理程序.如果应下载文件,请添加 MIME 映射. 解决办法:以管理员运行命令:C: ...

  4. 学习Python编程的11个精品资源

    本文由 伯乐在线 - atupal 翻译自 Alex Ivanovs.欢迎加入技术翻译小组.转载请参见文章末尾处的要求. 用 Python 写代码并不难,事实上,它一直以来都是被声称为最容易学习的编程 ...

  5. java加载配置文件的三种方式

    比如我们要加载db.properties文件 如图: 比如我们要加载source目录下的db.properties文件.就有以下几种方式 第一种是文件io流: public static void l ...

  6. ASP.NET Web Api构建基于REST风格的服务实战系列教程

    使用ASP.NET Web Api构建基于REST风格的服务实战系列教程[十]——使用CacheCow和ETag缓存资源 系列导航地址http://www.cnblogs.com/fzrain/p/3 ...

  7. HBase MVCC 代码阅读（一）

    MultiVersionConcurrencyControl.java,版本 0.94.1 MultiVersionConsistencyControl 管理 memstore 中的读写一致性.该类实 ...

  8. c# in deep 之Lambda表达式于LINQ表达式结合后令人惊叹的简洁（2）

    当Lambda表达式和LINQ一起使用时,我们会发现原本冗长的代码会变得如此简单.比如我们要打印0-10之间的奇数,让其从高到低排列并求其平方根,现在只用一行代码即可完成其集合的生成,直接上代码: v ...

  9. linux网卡驱动安装及锐捷使用

    原创博文,转载请注明出处 先吐槽一下,以前装了个Centos win7双系统, 然后手贱一不小心把启动文件给删了,接下来就用grub恢复启动文件,整了一天也没搞出来还把win7的Boot Manage ...

  10. 迟到的 WPF 学习 —— 入门

    之所以说"迟到的",是因为我太晚才开始学习 WPF 了,之前 WPF 刚发布的时候有过粗浅了解,那时的 WPF 还非常简陋,VS 提供的内置控件十分匮乏,让我这样的非常依赖 Win ...