你应该有遇到这种情况：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. leetcode第16题--3Sum Closest

    Problem:Given an array S of n integers, find three integers in S such that the sum is closest to a g ...

  2. Asp.Net Identity 深度解析 之 注册登录的扩展

    关于权限每个系统都有自己的解决方案,今天我们来讨论一下微软的权限框架Asp.Net Identity ,介绍如下  http://www.asp.net/identity 这里不在赘余. 很多人认为 ...

  3. extern用法汇总

    extern 在源文件A里定义的函数,在其他源文件中是看不见的(即不能訪问).为了在源文件B里能调用这个函数,应该在B的头部加上一个外部声明: extern   函数原型: 这样,在源文件B里也能够调 ...

  4. 读书笔记—CLR via C#线程27章节

    前言 这本书这几年零零散散读过两三遍了,作为经典书籍,应该重复读反复读,既然我现在开始写博了,我也准备把以前觉得经典的好书重读细读一遍,并且将笔记整理到博客中,好记性不如烂笔头,同时也在写的过程中也可 ...

  5. mysql通过字段注释查找字段名称

    原文:mysql通过字段注释查找字段名称 有时候表的字段太多,只是大致记得表的注释,想通过字段注释查找字段名称,可以用如下语句: SELECT COLUMN_NAME,column_comment F ...

  6. iOS基础 - 单元测试

    单元测试(unit testing):对软件中最小可测试单元进行检查和验证.一般面向过程的语言中,基本单元为函数,面向对象的语言中,基本单元通常是类,其实对于一个手机上的app来说基本单元也可以是一个 ...

  7. Step one : 熟悉Unix/Linux Shell 常见命令行 (一)

    1.文件系统结构和基本操作 ls  - - list directory contents -a/A 列出全部文件(包含隐藏文件) - i 列出inode号码 -n 查看UID and GID -d ...

  8. linux下的中文编码问题

    很多linux的初学者都会碰到这样一个问题:把windows下的文档拷到linux系统,会出现乱码!其实这涉及到中文编码的问题.linux系统默认的是统一码(utf8).而如果你的文件是big5,显然 ...

  9. ubuntu下无法打开windows下ntfs文件系统的解决方法

    例如:/dev/sda5无法加载,使用如下命令 sudo ntfsfix /dev/sda5 如果命令没有安装,先安装(sudo apt-get install ntfsprogs).

  10. android中自定义Theme以及TitleBar

    1.自定义Theme. 在res/values/styles.xml中的resources块中添加如下代码: <style name="StatusBarBackground" ...