你应该有遇到这种情况：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. css3标签学习总结文章

    1. :nth-child和 :nth-of-type 区别 比如: p:nth-child(2) 满足条件:1.必须是p标签:2.必须是父元素的第2个子元素:P:nth-of-type(2) 满足条 ...

  2. 熔断器C#实现

    关键词1:保险丝.电闸跳闸.输入密码错误3次则在指定的时间之内禁止登录 关键词2:保护性架构.防御性代码.软件可靠性 实现:https://github.com/fecktty/Circuit_Bre ...

  3. 如何用dumpbin.exe检查编译器生成的托管模块所嵌入的信息

    开启CMD 运行到dumpbin目录下:D:\Program Files (x86)\Microsoft Visual Studio 12.0\VC\bin 运行命令VCVARS32.BAT,配置环境 ...

  4. android shape总结 和控制的风格定制

    1:shape总结 1):shape文件是放置在drawable文件下的.res/drawable/filename.xml. 2):shape类型:android:shape. 一共同拥有四种:re ...

  5. [转]ANDROID 探究oom内幕

    从早期G1的192MB RAM开始,到现在动辄1G -2G RAM的设备,为单个App分配的内存从16MB到48MB甚至更多,但OOM从不曾离我们远去.这是因为大部分App中图片内容占据了50%甚至7 ...

  6. 大规模web服务开发技术

    大规模web服务开发技术 总评        这本书是日本一个叫hatena的大型网站的CTO写的,通过hatena网站从小到大的演进来反应一个web系统从小到大过程中的各种系统和技术架构变迁,比较接 ...

  7. VS2012下systemC配置

    一.编译System库 1.下载SystemC library source code               到http://www.systemc.org注册会员账号后,即可下载SystemC ...

  8. 为ASP.NET MVC应用程序实现继承

    为ASP.NET MVC应用程序实现继承 这是微软官方教程Getting Started with Entity Framework 6 Code First using MVC 5 系列的翻译,这里 ...

  9. 引用动态链接库Dll文件 引用失败 未能添加对HD.dll的引用。请确保此文件可访问并且是一个有效的程序集或COM组件

    出现这个问题,是由于使用了非.NET 的动态链接库,需要注册 方法如下: 1.在搜索程序和文件中使用 regsvr32 "D:\Projects\8.01.01.03-重庆大足\lib\Va ...

  10. namespace 的作用

    在写CPP的时候,常常要写using namespace std;这么一句话,到底有什么用呢? #include <iostream> namespace first { ; } name ...