jQuery实现单击弹出Div层窗口效果(可关闭可拖动)


Posted in Javascript onSeptember 19, 2015

本文实例讲述了jQuery实现单击弹出Div层窗口效果。分享给大家供大家参考。具体如下:

这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现在又有了jquery让我们用,更方便了,本代码演示了在CSS代码、JavaScript代码和HTML三者结合的情况下,如何实现一个可关闭的弹出窗口,鼠标点击关闭按钮后将其关闭,然后会显示打开按钮,单击这个按钮即弹出这个层窗口。

运行效果截图如下:

jQuery实现单击弹出Div层窗口效果(可关闭可拖动)

在线演示地址如下:

具体代码如下:

<!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>windows</title>
<style>
#main{position: absolute;top: 10%;left: 10%;}
#title{width: 500px;height: 19px;border-top: #85ABE4 1px solid;border-right: #222 1px solid;border-left: #85ABE4 1px solid;border-bottom: none;background: #5B8BD9;}
#content{border: #85ABE4 1px solid;border-top: none;width: 500px;height: 300px;}
#content img{width: 500px;height: 300px;}
#off{float: right;cursor: pointer;}
.none{display: none;}
.show{display: block;}
#open{background: #fff;border: #555 1px solid;height: 13px;width: 50px;position: absolute;left: 50px;top: 400px;cursor: pointer;}
#open marquee{font-size: 12px;color: #555;}
#img{background: url(images/s.jpg) no-repeat;float: right;width: 49px;height: 19px;}
#img: hover{background: url(images/sh.jpg) no-repeat;}
#ten{float: left;width: 400px;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//设置标题栏
document.title="0.0 WINDOW";
//窗口的拖动
var bool=false;
var offsetX=0;
var offsetY=0;
$("#main").mousedown(function(){
bool=true;
offsetX = event.offsetX;
offsetY = event.offsetY;
$("#ten").css('cursor','move');
})
 .mouseup(function(){
  bool=false;
  })
 $(document).mousemove(function(e){
  if(!bool)
  return;
  var x = event.clientX-offsetX;
  var y = event.clientY-offsetY;
  $("#main").css("left", x);
  $("#main").css("top", y);
  })
//窗口的关闭
$("#img").click(function() {
$("#main").removeClass("show");
$("#main").addClass("none");
$("#open").addClass("show"); });
$("#open").click(function() {
$("#main").removeClass("none");
$("#main").addClass("show");
$("#open").removeClass("show");
$("#open").addClass("none");
});
});
</script>
</head>
<body>
<div id="main" class="show">
<div id="title">
<div id="ten"></div>
<div id="img" title="close"></div>
</div>
<div id="content">
</div>
</div>
<div id="open" class="none" title="">
<marquee>点击弹出窗口</marquee>
</div>
</body>
</html>

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

Javascript 相关文章推荐
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
获取数组中最大最小值方法js代码(自写)
Aug 12 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 Javascript
在Javascript中处理字符串之big()方法的使用
Jun 08 Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 #Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 #Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 #Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 #Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 #Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 #Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 #Javascript
You might like
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
PHP脚本的10个技巧(5)
2006/10/09 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
详解KMP算法以及python如何实现
2020/09/18 Python
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
什么是组件架构
2016/05/15 面试题
公司禁烟通知
2015/04/23 职场文书
公司欠款证明
2015/06/24 职场文书
三十年同学聚会感言
2015/07/30 职场文书
初三数学教学反思
2016/02/17 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
nginx+lua单机上万并发的实现
2021/05/31 Servers
关于nginx 实现jira反向代理的问题
2021/09/25 Servers