伪 alter 弹窗 +弹窗统一
你应该有遇到这种情况: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 弹窗 +弹窗统一的更多相关文章
- python+selenium基础篇,弹窗处理
1.弹窗如下图所示 2.处理方法 from selenium.webdriver.common.action_chains import ActionChains#导入鼠标操作包 from selen ...
- windev的弹窗详情页滚动条实现方法以及弹窗尺寸规划
按照企业信息系统的设计习惯,我们一般将信息以列表的方式在主窗口展现,同时设置需要展现的字段,一些系统会将这个窗口称为总表页.列表页等.而信息的编辑或完整信息的查询,一般通过一个弹窗来实现,一些系统会将 ...
- easyui里弹窗的两种表现形式
easyui里弹窗的两种表现形式 博客分类: jQueryEasyUi 1.主JSP页面中描绘弹窗 <div id="centerDiv" data-options= ...
- No.7 selenium学习之路之Alert弹窗
Alert弹窗 弹窗是用工具选不到的~ 切换到alert driver.switch_to_alert() 新的语法:driver.switch_to.alert 注:新的语法不需要后面加括号 打印a ...
- Smobiler实现手机弹窗
前言 在实际项目中有很多场景需要用到弹窗,如图1 那么这些弹窗在Smobiler中如何实现呢? 正文 Smobiler实现弹窗有两种方式:1.MessageBox.Show 2.ShowDialog和 ...
- Javascript的内容
JS简介和变量 {JS的三种方式} 1 HTML中内嵌JS(不提倡使用) <button onclick="javascript:alert ...
- Javascript的内容摘要
JS简介和变量 {JS的三种方式} 1 HTML中内嵌JS(不提倡使用) <button onclick="javascript:alert ...
- web项目开发最佳做法
一个成熟的web项目应该具备以下基础代码或做法 1.前端基础框架: 统一的ajax 通信/表单提交及调用结果弹窗显示 统一的数据验证 统一的数据列表 2.后端基础框架: 统一的异常处理捕获,可针对具体 ...
- 2022年Web前端开发流程和学习路线(详尽版)
前言 前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理.理论上,面向用户的产品里,所有问题(包括产品.设计.后端.甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题 ...
随机推荐
- Vs2010中水晶报表引用及打包
原文:Vs2010中水晶报表引用及打包 转自:http://yunhaifeiwu.iteye.com/blog/1172283 Vs2010中水晶报表引用 在sap官网中下载支持vs 2010中的水 ...
- JavaScript一个类继承中实现
JavaScript类是默认原型对象继承: var Person = function() { this.name = "people"; this.hello = functio ...
- 微软的权限框架Asp.Net Identity
Asp.Net Identity 深度解析 之 注册登录的扩展 关于权限每个系统都有自己的解决方案,今天我们来讨论一下微软的权限框架Asp.Net Identity ,介绍如下 http://w ...
- BitNami-Redmine安装和VisualSVN-Server配合使用
原文:BitNami-Redmine安装和VisualSVN-Server配合使用 BitNami-Redmine安装和VisualSVN-Server配合使用 2011-05-04 10:48:22 ...
- Couchbase 服务器
安装 Couchbase 服务器 一. 下载安装包 首先,到官网下载安装包:http://www.couchbase.com/ 下载的地址:http://www.couchbase.com/downl ...
- 枚举for/in
for/in循环可以遍历对象中所有可以枚举的属性(包括自有属性和继承属性).对象继承的内置方法不能枚举,凡是在代码中给对象自己或者继承的类添加的属性方法都是可枚举的,但是对象自有的内置属性可不可以枚举 ...
- mvc上传头像加剪裁功能
asp.net mvc上传头像加剪裁功能 正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jquery ...
- mvc @html.editor怎么修改宽度 和其他属性
<style type="text/css"> #dob { width:6em; } </style> @using (Html.BeginForm()) ...
- Euclid Problem - PC110703
欢迎访问我的新博客:http://www.milkcu.com/blog/ 原文地址:http://www.milkcu.com/blog/archives/uva10104.html 原创:Eucl ...
- web代理进行跨域访问
通过web代理进行跨域访问,http请求返回超时的问题定位 [现象] 在ajax通过web代理跨域访问时,http第一次登陆时正常,但是第二次再下发其他命令的时候总是返回 java.net.Soc ...