css 弹出框可移动,JavaScript_JS+CSS实现可拖动的弹出提示框，本文实例讲述了JS+CSS实现可拖 - phpStudy...

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变换的基本用法