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 相关文章推荐
JavaScript window.setTimeout() 的详细用法
Nov 04 Javascript
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
javascript数组去掉重复
May 12 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
javascript每日必学之运算符
Feb 16 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
layui关闭层级、简单监听的实例
Sep 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
PHP 进程锁定问题分析研究
2009/11/24 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
php实现记事本案例
2020/10/20 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python3中int(整型)的使用教程
2017/03/23 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
会计毕业生求职简历的自我评价
2013/10/20 职场文书
报社实习生自荐信
2014/01/24 职场文书
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
英文推荐信格式范文
2014/05/09 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
2014年市场部工作总结
2014/11/25 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang