手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JS+CSS实现可拖动的弹出提示框
JS+CSS实现可拖动的弹出提示框
摘要:本文实例讲述了JS+CSS实现可拖动的弹出提示框。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:JS+CSS打造的可拖动的弹出提...

本文实例讲述了JS+CSS实现可拖动的弹出提示框。分享给大家供大家参考。具体实现方法如下:

复制代码 代码如下:<!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=utf-8" />

<title>JS+CSS打造的可拖动的弹出提示框</title>

<style type="text/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}

</style>

<>

<script language="javascript">

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='';

}

}

</script>

</head><body>

<div id="massage_box"><div>

<div onmousedown=MDown(massage_box)>

<span>×</span></div>

</div></div>

<div id="mask"></div>

<span><a href="#"><font size=18px>点此提示</font></a></span>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

【JS+CSS实现可拖动的弹出提示框】相关文章:

JQuery+CSS实现图片上放置按钮的方法

JS实现两表格里数据来回转移的方法

CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法

JS实现动态生成表格并提交表格数据向后端

JavaScript实现鼠标拖动效果的方法

JavaScript实现鼠标点击后层展开效果的方法

用JavaScript实现对话框的教程

jQuery仿gmail实现fixed布局的方法

JS实现上下左右对称的九九乘法表

JS实现模拟风力的雪花飘落效果

精品推荐
分类导航