JS+CSS实现可拖动的弹出提示框
本文实例讲述了JS+CSS实现可拖动的弹出提示框。分享给大家供大家参考。具体实现方法如下:
JS+CSS打造的可拖动的弹出提示框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.οnmοuseup=MUp
document.οnmοusemοve=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='';
}
}
×
希望本文所述对大家的javascript程序设计有所帮助。相关阅读:
基于CSS实现带阴影和小箭头的黑色风格下拉菜单效果
Java使用cookie显示最近查看过的书
Android中播放在线音乐代码
MySQL数据库设置远程访问权限方法小结
jQuery根据ID获取input、checkbox、radio、select的示例
基于SQL中的数据查询语句汇总
html 网页中的锚点(命名锚记)的使用介绍
Android控件之ImageView用法实例分析
Android开发技巧之永不关闭的Toast信息框(长时间显示而非系统关闭)
js实现动画特效的文字链接鼠标悬停提示的方法
js不能获取隐藏的div的宽度只能先显示后获取
android图像绘制(三)画布刷屏问题记录
JS基于Mootools实现的个性菜单效果代码
CSS3中的transform属性进行2D和3D变换的基本用法