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

 更新时间:2015年09月19日 15:35:16   作者:企鹅  
这篇文章主要介绍了jQuery实现单击弹出Div层窗口效果,具有可关闭可拖动的功能,涉及jQuery响应鼠标事件动态变换页面元素样式的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下

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

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

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/js-close-able-alert-dlg-style-codes/

具体代码如下:

<!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程序设计有所帮助。

相关文章

  • jQuery实现侧边导航栏及滑动电梯效果(仿淘宝)

    jQuery实现侧边导航栏及滑动电梯效果(仿淘宝)

    这篇文章主要介绍了如何利用JQuery+CSS模拟淘宝实现侧边导航栏以及滑动电梯效果,文中的示例代码讲解详细,感兴趣的小伙伴可以动手试一试
    2022-03-03
  • 使用js dom和jquery分别实现简单增删改

    使用js dom和jquery分别实现简单增删改

    今天学了jquery框架的简单使用。于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,两者对比可以看出jquery的强大
    2014-09-09
  • jquery选择器使用详解

    jquery选择器使用详解

    JQuery是一个很NB的js集成作品,以其简洁的语法和跨平台兼容性的优势,这里给大家介绍下JQuery中的选择器,不理解选择器或者用不好选择器,是不可能有一手很NB的JQuery技能的
    2014-04-04
  • 基于jQuery的checkbox全选问题分析

    基于jQuery的checkbox全选问题分析

    这篇文章主要介绍了基于jQuery的checkbox全选问题,结合实例形式分析了jQuery实现全选功能中遇到的问题与相应的解决方法,需要的朋友可以参考下
    2016-11-11
  • jQuery Pagination分页插件_动力节点Java学院整理

    jQuery Pagination分页插件_动力节点Java学院整理

    此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢。下面通过本文给大家分享jQuery Pagination分页插件的使用方法及参数介绍,感兴趣的朋友一起看看吧
    2017-07-07
  • JQuery中阻止事件冒泡几种方式及其区别介绍

    JQuery中阻止事件冒泡几种方式及其区别介绍

    JQuery中阻止事件冒泡方式有哪些?本文为大家准备了两种阻止事件冒泡的方式,两种方式的区别在于。return false 不仅阻止了事件往上冒泡,而且阻止了事件本身
    2014-01-01
  • jQuery之尺寸调整组件的深入解析

    jQuery之尺寸调整组件的深入解析

    本篇文章是对jQuery中的尺寸调整组件进行了详细的分析介绍,需要的朋友参考下
    2013-06-06
  • jQuery validate插件功能与用法详解

    jQuery validate插件功能与用法详解

    这篇文章主要介绍了jQuery validate插件功能与用法,结合实例形式详细分析了jQuery validate插件的功能、参数、使用方法与相关注意事项,需要的朋友可以参考下
    2016-12-12
  • 为JQuery EasyUI 表单组件增加焦点切换功能的方法

    为JQuery EasyUI 表单组件增加焦点切换功能的方法

    下面小编就为大家带来一篇为JQuery EasyUI 表单组件增加焦点切换功能的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • jQuery插件之validation插件

    jQuery插件之validation插件

    最常使用javascript的场合就是表单的验证,而jQuery作为一个优秀的javascript库,也提供了一个优秀的表单验证插件——Validation。本文将详细介绍validation插件。下面跟着小编一起来看下吧
    2017-03-03

最新评论