JS+CSS实现可拖动的弹出提示框


Posted in Javascript onFebruary 16, 2015

本文实例讲述了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 class="massage">

<div class="header" onmousedown=MDown(massage_box)>

<span onClick="massage_box.style.visibility='hidden'; mask.style.visibility='hidden'" style="float:right; display:inline; cursor:hand">×</span></div>

</div></div>

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

<span onClick="mask.style.visibility='visible';massage_box.style.visibility='visible'" style="cursor:hand"><a href="#"><font size=18px>点此提示</font></a></span>

</body>

</html>

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

Javascript 相关文章推荐
js 提交和设置表单的值
Dec 19 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
jquery Mobile入门—多页面切换示例学习
Jan 08 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
详解vue中axios的使用与封装
Mar 20 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 #Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 #Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 #Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 #Javascript
JavaScript简介
Feb 15 #Javascript
JavaScript的原型继承详解
Feb 15 #Javascript
javascript 闭包详解
Feb 15 #Javascript
You might like
一个简单的域名注册情况查询程序
2006/10/09 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
PHP-FPM实现性能优化
2016/03/31 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
JavaScript模块详解
2017/12/18 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
Python实现的端口扫描功能示例
2018/04/08 Python
Python实现FTP文件传输的实例
2019/07/07 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
Ruby如何定义一个类
2012/10/08 面试题
销售顾问的岗位职责
2013/11/13 职场文书
医学生职业规划范文
2014/01/05 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
学习退步检讨书
2014/09/28 职场文书
护士节慰问信
2015/02/15 职场文书
2015年国庆节寄语
2015/08/17 职场文书
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python