让背景如此暗淡(一种弹出提示信息时页面背景色调改变的方法)

这个效果前些日子有人在论坛问起,今天有空研究了下。我打了原创标记,因为我在写这个方法时的确没有参考过别人的代码。我的方法其实就是层遮罩加ALPHA滤镜实现预期效果。

提示信息框

a{ color:#000; font-size:12px;text-decoration:none}
a:hover{ color:#900; text-decoration:underline}
body{background:;filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366); overflow:hidden}
#massage_box{ position:absolute; left:expression((body.clientWidth-350)/2); top:expression((body.clientHeight-200)/2); width:350px; height:200px;filter:dropshadow(color=#666666,offx=3,offy=3,positive=2); z-index:2; visibility:hidden}
#mask{ position:absolute; top:0; left:0; width:expression(body.clientWidth); height:expression(body.clientHeight); background:#666; filter:ALPHA(opacity=60); z-index:1; visibility:hidden}
.massage{border:#036 solid; border-width:1 1 3 1; width:95%; height:95%; background:#fff; color:#036; font-size:12px; line-height:150%}
.header{background:#036; height:10%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3 5 0 5; color:#fff}

本站提示信息

×

  • 本人申明此博客所有文章(包括文章插图)均为原创,如需引用或转载请注明出处。
  • 欢迎大家对博文中观点留言评述,谢绝无聊人士无素质无观点的灌水漫骂。
  • 本站已设背景音乐,听音乐盒中收集的音乐时请先到页面底部关闭背景音乐。

显示提示信息

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

拖动消息框

提示信息框

a{ color:#000; font-size:12px;text-decoration:none}
a:hover{ color:#900; text-decoration:underline}
body{background:;filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366); overflow:hidden}
#massage_box{ position:absolute; left:expression((body.clientWidth-350)/2); top:expression((body.clientHeight-200)/2); width:350px; height:200px;filter:dropshadow(color=#666666,offx=3,offy=3,positive=2); z-index:2; visibility:hidden}
#mask{ position:absolute; top:0; left:0; width:expression(body.clientWidth); height:expression(body.clientHeight); background:#666; filter:ALPHA(opacity=60); z-index:1; visibility:hidden}
.massage{border:#036 solid; border-width:1 1 3 1; width:95%; height:95%; background:#fff; color:#036; font-size:12px; line-height:150%}
.header{background:#036; height:10%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3 5 0 5; color:#fff}

var Obj=''
document.onmouseup=MUp
document.onmousemove=MMove

function MDown(Object){
Obj=Object.id
document.all(Obj).setCapture()
pX=event.x-document.all(Obj).style.pixelLeft;
pY=event.y-document.all(Obj).style.pixelTop;
}

function MMove(){
if(Obj!=''){
document.all(Obj).style.left=event.x-pX;
document.all(Obj).style.top=event.y-pY;
}
}

function MUp(){
if(Obj!=''){
document.all(Obj).releaseCapture();
Obj='';
}
}

本站提示信息

×

  • 本人申明此博客所有文章(包括文章插图)均为原创,如需引用或转载请注明出处。
  • 欢迎大家对博文中观点留言评述,谢绝无聊人士无素质无观点的灌水漫骂。
  • 本站已设背景音乐,听音乐盒中收集的音乐时请先到页面底部关闭背景音乐。

显示提示信息

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

那为什么不能自适应高度?不是可以取页面高度吗?为什么不用这个呢 
用scrollWidth和scrollHeight吧

提示信息框

a{ color:#000; font-size:12px;text-decoration:none}
a:hover{ color:#900; text-decoration:underline}
body{background:;filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366); overflow:hidden}
#massage_box{ position:absolute; left:expression((body.clientWidth-350)/2); top:expression((body.clientHeight-200)/2); width:350px; height:200px;filter:dropshadow(color=#666666,offx=3,offy=3,positive=2); z-index:2; visibility:hidden}
#mask{ position:absolute; top:0; left:0; width:expression(body.scrollWidth); height:expression(body.scrollHeight); background:#666; filter:ALPHA(opacity=60); z-index:1; visibility:hidden}
.massage{border:#036 solid; border-width:1 1 3 1; width:95%; height:95%; background:#fff; color:#036; font-size:12px; line-height:150%}
.header{background:#036; height:10%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3 5 0 5; color:#fff}

var Obj=''
document.onmouseup=MUp
document.onmousemove=MMove

function MDown(Object){
Obj=Object.id
document.all(Obj).setCapture()
pX=event.x-document.all(Obj).style.pixelLeft;
pY=event.y-document.all(Obj).style.pixelTop;
}

function MMove(){
if(Obj!=''){
document.all(Obj).style.left=event.x-pX;
document.all(Obj).style.top=event.y-pY;
}
}

function MUp(){
if(Obj!=''){
document.all(Obj).releaseCapture();
Obj='';
}
}

本站提示信息

×

  • 本人申明此博客所有文章(包括文章插图)均为原创,如需引用或转载请注明出处。
  • 欢迎大家对博文中观点留言评述,谢绝无聊人士无素质无观点的灌水漫骂。
  • 本站已设背景音乐,听音乐盒中收集的音乐时请先到页面底部关闭背景音乐。

显示提示信息

bottom here

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • 让背景如此暗淡(一种弹出提示信息时页面背景色调改变的方法)

    这个效果前些日子有人在论坛问起,今天有空研究了下.我打了原创标记,因为我在写这个方法时的确没有参考过别人的代码.我的方法其实就是层遮罩加ALPHA滤镜实现预期效果. 提示信息框 a{ color:#000; font-size:12px;text-decoration:none} a:hover{ color:#900; text-decoration:underline} body{background:;filter:progid:DXImageTransform.Microsoft.Gra

  • 非常漂亮的让背景如此暗淡(一种弹出提示信息时页面背景色调改变的方法)

    这个效果前些日子有人在论坛问起,今天有空研究了下.我打了原创标记,因为我在写这个方法时的确没有参考过别人的代码.我的方法其实就是层遮罩加ALPHA滤镜实现预期效果. 提示信息框 a{ color:#000; font-size:12px;text-decoration:none} a:hover{ color:#900; text-decoration:underline} body{background:;filter:progid:DXImageTransform.Microsoft.Gra

  • layer弹出层父子页面事件相互调用方法

    // 父页面 <body> <a data-url="bbbb.html" id="parentIframe">小小提示层</a> <input id="shuzhi" /> <button class="but_par">父页面</button> </body> <script src="../jquery-1.9.1.min

  • JavaScript中常用的3种弹出提示框(alert、confirm、prompt)

    三种提示框 alert () confirm() prompt () alert () alert()方法是显示一条弹出提示消息和确认按钮的警告框. 需要注意的是 :alert()是一个阻塞的函数,如果我们不点确认按钮,后面的内容就不会加载出来. 使用方式: alert("想要提示的文本内容") 样例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <

  • JavaScript常用的弹出广告及背投广告实现方法

    本文实例讲述了JavaScript常用的弹出广告及背投广告实现方法.分享给大家供大家参考.具体分析如下: 弹出广告和背景广告在大网站用的比较多,也是站长的必备代码,本代码段中包括弹出窗口广告以及背投广告两种形式,根据自己的需要,你可以随意选择. 注:这类广告不建议大家用,大多浏览器都会把此类AD拦截,只为大家学习之用. 复制代码 代码如下: <html> <head> <title>JavaScript常用的弹出广告及背投广告代码</title> </

  • Vue出现弹出层时禁止底部页面跟随滑动

    背景:最近在写一个vue项目,当出现弹出层时,发现底部页面跟随滚动,但是产品不想要这种效果,于是找各种资料,发现很多说法,但是试了试,发现有的根本就不行,比如说有人提出用vue中提供的@touchmove.prevent方法来解决,但是我试了没起作用,或者@touchmove.prevent.stop也不起作用.下面是几种可以解决问题的方式,仅供参考: 1.在有弹出框的页面中,加上以下方法,弹出框出现时调用禁止滚动方法stopScroll(),弹出框去掉是调取允许滚动方法canScroll()即

  • 解决layer弹出层自适应页面大小的问题

    前两天在Vue中引入了Vue-layer插件,实现了弹出层效果.不过由于是在22寸屏下开发的,没多想,弹出层的area的长宽就设定的都是800px,效果还很好.结果那给用户看,他们是12寸的笔记本.弹出层直接撑爆了页面,无法关闭... 网上的解决方案大都是以下几种: 1.改成百分比形式.有bug,下面细说. 2.改成em,rem等.同上 3.采用area:auto.可能是因为采用了swiper的原因吧,这样设置会导致弹出层出现"顶天立地"的效果 4.采用iframeAuto.这个没太搞

  • vue 解决移动端弹出键盘导致页面fixed布局错乱的问题

    话不多说,直接上问题图片 这里确认按钮是fixed布局 bottom:0 弹出键盘之后按钮被顶到了键盘上面 网上搜到的解决方案有两种, 一种是监听页面高度(我采用的这种) 一种是监听软键盘事件(ios和安卓实现方式不同,未采用) 下面是实现代码 data() { return { docmHeight: document.documentElement.clientHeight ||document.body.clientHeight, showHeight: document.document

  • jQuery实现鼠标经过弹出提示信息的地图热点效果

    本文实例讲述了jQuery实现鼠标经过弹出提示信息的地图热点效果.分享给大家供大家参考.具体如下: 这里的jQuery鼠标经过弹出提示信息地图热点效果,很多网站上有用到,送给大家,对作者表示感谢. 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html&

  • asp.net实现删除DataGrid的记录时弹出提示信息

    本文实例展示了asp.net实现删除DataGrid的记录时弹出提示信息的方法,在进行项目开发的时候非常实用,具体步骤如下: 1.在DataGrid中加一超链接按钮列,文本设为"删除",在aspx页面中加上如下代码: <script language="JavaScript"> function delete_confirm(e){ if(event.srcElement.outerText=="删除"||event.srcElement.name==&

随机推荐