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 风格的HTML文本转义
Jul 01 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
May 07 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
js实现二级联动简单实例
Jan 11 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仿ZOL分页类代码
2008/10/02 PHP
PHP 数据库树的遍历方法
2009/02/06 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
Yii2.0 RESTful API 基础配置教程详解
2018/12/26 PHP
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
Python 文件操作实现代码
2009/10/07 Python
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
深入理解Python对Json的解析
2017/02/14 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
Python列表解析操作实例总结
2020/02/26 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
一个C/C++编程面试题
2013/11/10 面试题
新大陆软件面试题
2016/11/24 面试题
国际经济贸易专业推荐信
2013/11/06 职场文书
升职自荐信
2013/11/28 职场文书
大学生的自我鉴定范文
2014/01/21 职场文书
高考备战决心书
2014/03/11 职场文书
社区党建工作方案
2014/06/10 职场文书
2014年学生会工作总结
2014/11/07 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
律师函格式范本
2015/05/27 职场文书
美容院员工规章制度
2015/08/05 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
JUnit5常用注解的使用
2021/07/02 Java/Android
如何通过一篇文章了解Python中的生成器
2022/04/02 Python
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang