自定义alert窗口样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{background:blue}
.shield{position: absolute;left:0;top:0;width:100%;background:rgba(255,255,255,.4);text-align:center;z-index:25px;filter:alpha(opacity=50);}
.fram{position:absolute;left:50%;top:50%;margin-left:-225px;margin-top:-75px;width:450px;height:150px;
background: #ff0000;text-align: center;line-height: 150px;z-index: 300}
</style>
</head>
<body>
<script type="text/javascript">
window.alert = function(str){
//创建一个div用来遮盖整个body
var shield = document.createElement("DIV");
shield.id = "shield";
shield.setAttribute("class","shield");
shield.style.height = document.body.scrollHeight+"px";
//创建一个div放置alert内容
var alertFram = document.createElement("DIV");
alertFram.id="alertFram";
alertFram.setAttribute("class","fram");
strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";
strHtml += " <li style=\"background:#DD828D;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;\">[自定义提示]</li>\n";
strHtml += " <li style=\"background:#fff;text-align:center;font-size:12px;height:120px;line-height:120px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;\">"+str+"</li>\n";
strHtml += " <li style=\"background:#FDEEF4;text-align:center;font-weight:bold;height:25px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"确 定\" onclick=\"doOk()\" /></li>\n";
strHtml += "</ul>\n";
alertFram.innerHTML = strHtml;
document.body.appendChild(alertFram);
document.body.appendChild(shield);
this.doOk = function(){
alertFram.style.display = "none";
shield.style.display = "none";
}
alertFram.focus();
document.body.onselectstart = function(){return false;};
}
alert("10");
</script>
</body>
</html>

自定义alert窗口样式的更多相关文章
- 自定义WPF 窗口样式
原文:自定义WPF 窗口样式 Normal 0 false 7.8 pt 0 2 false false false EN-US ZH-CN X-NONE 自定义 Window 在客户端程序中,经常需 ...
- [Swift通天遁地]一、超级工具-(14)使用SweetAlert制作漂亮的自定义Alert窗口
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- cesium自定义气泡窗口infoWindow
一.自定义气泡窗口与cesium默认窗口效果对比: 1.cesium点击弹出气泡窗口显示的位置固定在地图的右上角,默认效果: 2.对于习惯arcgis或者openlayer气泡窗口样式的giser来说 ...
- cesium 之自定义气泡窗口 infoWindow 篇
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 自 ...
- WPF 使用 WindowChrome,在自定义窗口标题栏的同时最大程度保留原生窗口样式(类似 UWP/Chrome)
WPF 自定义窗口样式有多种方式,不过基本核心实现都是在修改 Win32 窗口样式.然而,Windows 上的应用就应该有 Windows 应用的样子嘛,在保证自定义的同时也能与其他窗口样式保持一致当 ...
- 安卓—自定义 AlertDialog 的样式
自定义修改安卓弹出框的样式 效果图: 1.在style.xml下添加 <!-- 自定义弹出样式 --> <style name="MyDialogStyle" p ...
- 百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题
项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖 ...
- cesium自定义气泡窗口infoWindow后续优化篇
http://www.cnblogs.com/giserhome/p/6248858.html该篇文章实现的自定义气泡窗口是基于修改cesium源代码基础上,这种做法只是援兵之计,凑合应付的,投机取巧 ...
- cesium 之自定义气泡窗口 infoWindow 后续优化篇(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 该 ...
随机推荐
- jenkins简单安装及配置(Windows环境)
jenkins是一款跨平台的持续集成和持续交付.基于Java开发的开源软件,提供任务构建,持续集成监控的功能,可以使开发测试人员更方便的构建软件项目,提高工作效率. Windows平台下,一般安装方法 ...
- java将一个正整数分解质因数。例如:输入90,打印出90=2*3*3*5。
首先我们的算法是:例如 输入的是 90 1.找到90的最小公约数(1除外)是 2 2.然后把公约数 2 输出 3.接着用 90 / 2 = 45 (如果这里是素数,就结束,否则继续找最小公约数) 4. ...
- IT 必备电脑快捷键
IT 必备电脑快捷键 键盘上除了有字母.数字之外,还有一些特殊的按键:ctrl.shift.alt.tab ● ctrl键是英语control“控制”的意思,这个按键,单独按没有任何作用,都要和其他的 ...
- spark2.1:flatMap的用法
代码示例: val sample_data_combine_result=List( (0,(List(FitModel(4022,1447.92,-8.38983306721434,2.0)),1) ...
- 微信 登录 Scope 参数错误或没有 Scope 权限
//电脑端 扫码授权登录 public static string AuthUrl = "https://open.weixin.qq.com/connect/qrconnect?appid ...
- 03、NetCore2.0下Web应用之搭建最小框架
03.NetCore2.0下Web应用之搭建最小框架 这里我们不使用VS2017或者CLI命令的方式创建Asp.Net Core 2.0网页应用程序,而是完全手工的一点点搭建一个Web框架,以便更好的 ...
- Animations in UWP Community Toolkit - Overview
概述 UWP Community Toolkit 中有一个 Animations 的集合,它们可以帮助开发者实现很多的动画,本篇我们先来看一下 Animations 的功能都有哪些,再后面会针对每一 ...
- javascript 错误处理和堆栈追踪浅析
合理地处理堆栈信息能使你清除无用的数据, 而只专注于有用的数据. 同时, 当更好地理解 Errors 对象及其相关属性之后, 能有助于你更充分地利用 Errors. (函数的)调用栈是怎么工作的 在谈 ...
- web前端HTML基础
一.HTML介绍 HTML全称是(Hypertext Markup Language, HTML)又称为超级文本标记语言,它主要his一种用于创建网页的标记语言,在本质上是浏览器可以识别的规则,我们按 ...
- [原创]手把手教你写网络爬虫(4):Scrapy入门
手把手教你写网络爬虫(4) 作者:拓海 摘要:从零开始写爬虫,初学者的速成指南! 封面: 上期我们理性的分析了为什么要学习Scrapy,理由只有一个,那就是免费,一分钱都不用花! 咦?怎么有人扔西红柿 ...