分类 : 代码案例
jQuery实现单击弹出Div层窗口效果(可关闭可拖动),本文实例讲述了jQuery实现单击弹出Div层窗口效果。分享给大家供大家参考。具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现在又有了jquery让我们用,更方便了,本代码演示了在CSS代码、JavaScript代码

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


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

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



在线演示地址如下


具体代码如下:

<!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"; 
//窗口的拖动 
varbool=false; 
varoffsetX=0; 
varoffsetY=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; 
  varx = event.clientX-offsetX; 
  vary = 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程序设计有所帮助。


分类: 代码案例  发布: 2019-07-16-星期二   访问() .NET技术    Web前端    JAVA开发    语言编程    数据库    电脑知识    代码案例

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved