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是否加载完成的完美方法
Jan 07 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
浅谈JavaScript中null和undefined
Jul 09 Javascript
JavaScript Date对象详解
Mar 01 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
JS搜狐面试题分析
Dec 16 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 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
PHP中比较时间大小实例
2014/08/21 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python实现异步回调机制代码分享
2014/01/10 Python
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
Python中标准模块importlib详解
2017/04/16 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
python 发送json数据操作实例分析
2019/10/15 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
有750多个顶级品牌的瑞士时尚在线:ABOUT YOU
2017/01/04 全球购物
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
咖啡馆创业计划书
2014/01/26 职场文书
个人党性剖析材料
2014/02/03 职场文书
大学英语专业求职信
2014/06/21 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
react国际化react-intl的使用
2021/05/06 Javascript
图文详解nginx日志切割的实现
2022/01/18 Servers