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 相关文章推荐
动态加载iframe
Jun 16 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 Javascript
Javascript开发之三数组对象实例介绍
Nov 12 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
BootStrapTable服务器分页实例解析
Dec 20 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
使用JavaScript破解web
Sep 28 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 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
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
php下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
利用Python实现Windows定时关机功能
2017/03/21 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
python 实现波浪滤镜特效
2020/12/02 Python
数控专业应届生求职信
2013/11/27 职场文书
创建卫生先进单位实施方案
2014/03/10 职场文书
毕业班联欢会主持词
2014/03/27 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
质量保证书格式模板
2015/02/27 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
成人成长感言如何写?
2019/08/16 职场文书
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
Java 数组的使用
2022/05/11 Java/Android
Java中的Kotlin 内部类原理
2022/06/16 Java/Android