<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>弹出一个层,页面变灰</title>
<script language="javascript">
function alertWin(title, msg, w, h){
var titleheight = "23px"; // 窗口标题高度
var bordercolor = "#336699"; // 提示窗口的边框颜色
var titlecolor = "#FFFFFF"; // 窗口标题颜色
var titlebgcolor = "#336699"; // 窗口标题背景色
var bgcolor = "#FFFFFF"; // 提示内容的背景色
var iWidth = document.documentElement.clientWidth;
var iHeight = document.documentElement.clientHeight;
var bgObj = document.createElement("div");
bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;";
document.body.appendChild(bgObj);
var msgObj=document.createElement("div");
msgObj.style.cssText = "position:absolute;font:11px '宋体';top:"+(iHeight-h)/2+"px;left:"+(iWidth-w)/2+"px;width:"+w+"px;height:"+h+"px;text-align:center;border:1px solid "+bordercolor+";background-color:"+bgcolor+";padding:1px;line-height:22px;z-index:102;";
document.body.appendChild(msgObj);
var table = document.createElement("table");
msgObj.appendChild(table);
table.style.cssText = "margin:0px;border:0px;padding:0px;";
table.cellSpacing = 0;
var tr = table.insertRow(-1);
var titleBar = tr.insertCell(-1);
titleBar.style.cssText = "width:100%;height:"+titleheight+"px;text-align:left;padding:3px;margin:0px;font:bold 13px '宋体';color:"+titlecolor+";border:1px solid " + bordercolor + ";cursor:move;background-color:" + titlebgcolor;
titleBar.style.paddingLeft = "10px";
titleBar.innerHTML = title;
var moveX = 0;
var moveY = 0;
var moveTop = 0;
var moveLeft = 0;
var moveable = false;
var docMouseMoveEvent = document.onmousemove;
var docMouseUpEvent = document.onmouseup;
titleBar.onmousedown = function() {
var evt = getEvent();
moveable = true;
moveX = evt.clientX;
moveY = evt.clientY;
moveTop = parseInt(msgObj.style.top);
moveLeft = parseInt(msgObj.style.left);
document.onmousemove = function() {
if (moveable) {
var evt = getEvent();
var x = moveLeft + evt.clientX - moveX;
var y = moveTop + evt.clientY - moveY;
if ( x > 0 &&( x + w < iWidth) && y > 0 && (y + h < iHeight) ) {
msgObj.style.left = x + "px";
msgObj.style.top = y + "px";
}
}
};
document.onmouseup = function () {
if (moveable) {
document.onmousemove = docMouseMoveEvent;
document.onmouseup = docMouseUpEvent;
moveable = false;
moveX = 0;
moveY = 0;
moveTop = 0;
moveLeft = 0;
}
};
}
var closeBtn = tr.insertCell(-1);
closeBtn.style.cssText = "cursor:pointer; padding:2px;background-color:" + titlebgcolor;
closeBtn.innerHTML = "<span style='font-size:15pt; color:"+titlecolor+";'>×</span>";
closeBtn.onclick = function(){
document.body.removeChild(bgObj);
document.body.removeChild(msgObj);
}
var msgBox = table.insertRow(-1).insertCell(-1);
msgBox.style.cssText = "font:10pt '宋体';";
msgBox.colSpan = 2;
msgBox.innerHTML = msg;
// 获得Event对象,用于兼容IE和FireFox
function getEvent() {
return window.event || arguments.callee.caller.arguments[0];
}
}
</script>
</head>
<body>
<input type="button" value="点这里" onclick="alertWin('源码爱好者友情提示','WWW. CodeFans.net 源码爱好者,是一个有质量注重源码质量的学习型源码下载站,这里的每一款源码都经过了精心测试,下载就可使用。',290,208);" />
</body>
</html>点击按钮,弹出一个可关闭的层窗口,网页背景变灰
- 浏览: 204443 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (397)
- j2se (28)
- nio (3)
- 易错点 (3)
- 面试ssh (9)
- ssh整合 (11)
- jbpm+spring (2)
- js (15)
- 高级技术 (59)
- swing (3)
- 数据库 (16)
- hibernate (18)
- spring (19)
- 开发网站知识点 (9)
- jbpm (4)
- json (5)
- 设计模式 (22)
- 自定义标签 (1)
- j2ee (9)
- lucene (3)
- cahce (11)
- maven (5)
- html5 (1)
- 多数据源 (10)
- 页面聊天 (9)
- 富客户端 (1)
- android (13)
- aop+拦截器+jms (13)
- 框架整合 (1)
- 非阻塞io (24)
- 暂时不看 (13)
- webservice (3)
- oracle (3)
- 算法 (4)
- 协程 (2)
- netty (1)
- 爬虫 (0)
- 高级基础 (1)
- JVM调优总结 (12)
- 知识点技巧 (1)
- REST (0)
- 基础 io (2)
- dubbo (8)
- 线程 (1)
- spring源码 (2)
- git (1)
- office (2)
最新评论
-
sjzcmlt:
,写的挺好的啊
一个完整的负载均衡的例子 . -
他大姨妈:
网上大部分例子都是直接通过IdleStateHandler来实 ...
Netty的超时机制 心跳机制
发表评论
-
解析js 中的 this.initialize.apply(this, arguments)
2016-04-07 21:31 367一、 起因 那天用到prototype.js于是打开看看,才 ... -
CSS 多浏览器兼容性问题及解决方案
2016-04-07 19:48 533兼容性处理要点 1、DOCTYPE 影响 CSS 处理 2、 ... -
Javascript 多浏览器兼容性问题及解决方案
2016-04-07 19:46 434一、document.formName.item(”itemN ... -
IE和Firefox(火狐)在JavaScript方面的不兼容及统一方法总结
2014-07-11 23:22 368测试代码时,发现不少 ... -
jquery.validate.js表单验证
2014-05-17 02:30 221一、用前必备官方网站 ... -
JQuery插件开发教程
2014-05-16 10:00 4951.1JQuery的插件分为3中类型: (1)封装对象方法 ... -
jQuery.extend 函数详解
2014-05-16 10:00 340JQuery的extend扩展方法 ... -
JS 创建对象(常见的几种方法)
2014-05-16 10:00 611言归正传,本文讨论几种js创建对象的方法,先从最好理解的工 ... -
关于JS中的constructor与prototype .
2014-06-16 10:01 405在学习JS的面向对象过程中,一直对constructor与 ... -
js继承
2014-06-16 10:01 342js继承有5种实现方式: 1、继承第一种方式:对象冒充 ... -
jquery.validationEngine
2014-05-13 10:26 540文汉化版,官方只有英文的。同时根据中国国情修改了部分验证规则 ... -
jQuery.noConflict();
2014-05-07 10:41 557var $$=jQuery.noConflict(); fu ... -
ajax
2014-06-15 12:40 4371.后台输出对象,前台直接对象(点)属性 Gson gson ... -
个人平时常用的两种js类写法 (转)
2014-04-04 15:22 359<!DOCTYPE html PUBLIC " ...
相关推荐
点击按钮,弹出一个可关闭的层窗口,网页背景变灰
本文实例讲述了javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法。分享给大家供大家参考。具体分析如下: 这里点击按钮后,弹出一个可关闭的层窗口,随之网页背景变灰,在QQ网站上经常会看到QQ...
NULL 博文链接:https://highping.iteye.com/blog/362231
9.39 选中单选按钮改变网页背景颜色... 288 9.40 检验一个复选框是否选中... 289 9.41 检验一组复选框是否选中... 290 9.42 检验两个复选框是否同时选中... 291 9.43 解除所有复选框的选中... 292 9.44 全选...
jQuery点击弹窗设置网页背景颜色填充代码,鼠标点击右上角设置图标按钮弹出窗口输入16进制颜色值,应用后网页背景色即变成输入的颜色。
javascript主页弹出窗口技巧.html div span layer的区别.html email地址的分割.html ENTER键可以让光标移到下一个输入框.html IE地址栏前换成自己的图标 .html TEXTAREA自适应文字行数的多少.html title显示...
一款支持拖拽的jQuery层弹出窗口(TipsWindown1.0版本)下载 10.分享一款jquery Ajax弹出对话框插件SimpleModal 11.下载jQuery对话框Dialog弹出层插件演示与使用说明 12.实用jQuery漂亮浮动层插件,精美Dialog...
关闭窗口或进程.ec 内存专用模块.ec 内存优化.ec 内存读写.ec 内存读写66.ec 内存读写模块 2.0.ec 内存读写模块.ec 内存读写模块1.0.ec 内存读写模块2.0.ec 写屏幕.ec 冰川多媒体播放模块 1.0.ec 凝逸...
1345个易语言模块,易语言模块大集合,够你用的啦 1亦思验证码识别1.5免费版.ec 24位转单色位图模块.ec 32张发牌.ec 3D引擎支持库-eOgre.ec 69msn.ec ACCESS 到高级表格.ec Access操作.ec Access数据库压缩修复新建....
1350多个精品易语言模块提供下载介绍 1亦思验证码识别1.5免费版.ec 24位转单色位图模块.ec 32张发牌.ec 3D引擎支持库-eOgre.ec 69msn.ec ACCESS 到高级表格.ec Access操作.ec Access数据库压缩修复新建.ec ACCSEE...
显示图像在弹出窗口中显示一幅图像,支持多种显示风格。 启动幻灯放映内建的幻灯放映功能,支持大量图形显示特效。 页面跳转跳转到多页菜单中的其它页面。 最小化最小化菜单窗口。 退出退出自动运行菜单。...
116.如何在视图窗口中创建弹出式跟踪菜单 117.如何在视图窗口中创建上下文快捷菜单 118.如何禁止运行默认系统菜单按钮命令 119.如何设置默认系统菜单的字体为粗体 120.如何为默认系统菜单文字添加下划线 121.如何...
弹出下载窗口.ec 打印预览2.41(注册表配置).ec 打印预览模块 1.0.ec 到文本.ec 调整窗口大小.ec 动画窗体1.3.ec 动态调用DLL函数.ec 动态调整分辩率.ec 读取DBF数据.ec 读取超级列表框模块 1.0.ec 读取超级列表框...
显示图像在弹出窗口中显示一幅图像,支持多种显示风格。 启动幻灯放映内建的幻灯放映功能,支持大量图形显示特效。 页面跳转跳转到多页菜单中的其它页面。 最小化最小化菜单窗口。 退出退出自动运行菜单。...
内容索引:脚本资源,jQuery,弹出框 核心基于jQuery的渐变弹出框,弹出在网页的正中间,具有超炫淡入淡出效果,可以看到jQuery实在是非常强大,我们仅需少量的CSS和JavaScript代码即可完成这一效果。我们可以在这个...
弹出网页广告.ec 弹出下载窗口.ec 导出数据1.1.ec 导出数据1.21.ec 到文本.ec 登录确认模块 1.0.ec 低级功能模块.ec 迪克—透明窗体.ec 电子琴模块.ec 调用外部命令.ec 调整窗口大小.ec 定时提醒1.1.ec ...