jQuery实现弹出窗口弹出div层的实例代码
通过今天的jquery实例学习，我们要达到这样的效果：点击页面的链接，弹出一个div层，同时页面的其他部分变灰并且不能点击；无论是改变浏览器窗口大小还是下拉滚动条，这个弹出层都能始终保持居中；点击页面的关闭按钮，弹出层消失，页面恢复原样。
这里借鉴之前的一篇文章《基于jQuery的固定飘浮层》，使弹出窗口可以始终固定在浏览器的正中间。在这里有一个要点，就是如何使页面的其他地方在弹出窗口的同时变灰。我使用的方法就是在点击链接弹出div层的时候，给页面增加一个div层，这个层就“负责”使页面变灰。点击关闭后，删除这个层就能使页面恢复原样。不知道有没有更好的方法，有的话请告诉我哦。
其他应该没什么问题了，还是很简单的，在这里顺便贴上jQuery代码：
$(function(){
var screenwidth,screenheight,mytop,getPosLeft,getPosTop
screenwidth = $(window).width();
screenheight = $(window).height();
//获取滚动条距顶部的偏移
mytop = $(document).scrollTop();
//计算弹出层的left
getPosLeft = screenwidth/2 - 260;
//计算弹出层的top
getPosTop = screenheight/2 - 150;
//css定位弹出层
$("#box").css({"left":getPosLeft,"top":getPosTop});
//当浏览器窗口大小改变时...
$(window).resize(function(){
<span style="white-space:pre"> </span>screenwidth = $(window).width();
<span style="white-space:pre"> </span>screenheight = $(window).height();
<span style="white-space:pre"> </span>mytop = $(document).scrollTop();
<span style="white-space:pre"> </span>getPosLeft = screenwidth/2 - 260;
<span style="white-space:pre"> </span>getPosTop = screenheight/2 - 150;
<span style="white-space:pre"> </span>$("#box").css({"left":getPosLeft,"top":getPosTop+mytop});
});
//当拉动滚动条时...
$(window).scroll(function(){
<span style="white-space:pre"> </span>screenwidth = $(window).width();
<span style="white-space:pre"> </span>screenheight = $(window).height();
<span style="white-space:pre"> </span>mytop = $(document).scrollTop();
<span style="white-space:pre"> </span>getPosLeft = screenwidth/2 - 260;
<span style="white-space:pre"> </span>getPosTop = screenheight/2 - 150;
<span style="white-space:pre"> </span>$("#box").css({"left":getPosLeft,"top":getPosTop+mytop});
});
//点击链接弹出窗口
$("#popup").click(function(){
<span style="white-space:pre"> </span>$("#box").fadeIn("fast");
<span style="white-space:pre"> </span>//获取页面文档的高度
<span style="white-space:pre"> </span>var docheight = $(document).height();
<span style="white-space:pre"> </span>//追加一个层，使背景变灰
<span style="white-space:pre"> </span>$("body").append("<div id='greybackground'></div>");
<span style="white-space:pre"> </span>$("#greybackground").css({"opacity":"0.5","height":docheight});
<span style="white-space:pre"> </span>return false;
});
//点击关闭按钮
$("#closeBtn").click(function() {
<span style="white-space:pre"> </span>$("#box").hide();
<span style="white-space:pre"> </span>//删除变灰的层
<span style="white-space:pre"> </span>$("#greybackground").remove();
<span style="white-space:pre"> </span>return false;
});
});
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>jquery pop up</title>
<script src=http://blog.soso.com/qz.q/"jquery.js" type="text/javascript"></script>
<style type="text/css">
* {margin:0;padding:0;}
#wrapper {height:1000px;}
#box {display:none;position:absolute;width:520px;height:300px;border:#f60 solid 2px;z-index:200;background:#fff;}
#closeBtn {position:absolute;right:10px;top:10px;cursor:pointer;}
#greybackground {background:#000;display:block;z-index:100;width:100%;position:absolute;top:0;left:0;}
</style>
</head>
<body>
<div id="wrapper">
<a href=http://blog.soso.com/qz.q/"#" id="popup">点击弹出div窗口</a>
</div>
<div id="box">
<span style="white-space:pre"> </span><span id="closeBtn">关闭</span>
</div>
</body>
</html>
以上所述是小编给大家介绍的jQuery实现弹出窗口弹出div层的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
jquery实现弹出窗口效果的实例代码
JavaScript实现弹出窗口实质上就是在浏览器上画了一个方形区域,并在开始时将其隐藏,只是到某个JavaScript事件时才通过修改css的属性值来将其显示出来. 其大致步骤为: •创建一个装载弹出窗口的div 复制代码 代码如下: <html> <head> <title>jQuery实例1:浮动窗口</title> <meta http-equiv="Content-Type" content="te
-
jQuery弹出窗口打开链接的实现代码
下面给大家分享一段jquery代码实现弹出窗口打开链接的实现方法 window.open(url, name, style, replace); //弹出窗口打开链接,参数:网址,命名,窗体样式,是否替代原窗口 用处:打开新窗体,打开自定义页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>在弹出窗口中打开新连接</title> </h
-
Jquery弹出窗口插件 LeanModal的使用方法
开发网站少不了要经常用弹出窗口的形式,今天在网上搜了个小插件LeanModal,记录于此,方便自己,亦方便他人使用. 此插件是个老外写的,体积小是它最大的优点,压缩后1k不到.当然,此插件是寄生于JQuery上. 一. 效果图 二.使用步骤: 1.引用Jquery.js和leanModal.min.js 复制代码 代码如下: <script src="Javascript/jquery-1.4.1.min.js" type="text/javascript"&
-
AeroWindow 基于JQuery的弹出窗口插件
可以一个页面中创建多个弹出窗,被选中的弹出窗会加亮显示,在同一网页中可以有多个弹出窗口,也可以通过双击窗口实现最大化,跟windows像极了.如果想要做一个类似操作系统的页面,用这个插件是完全可以实现的.兼容多种主流浏览器. 最基础的调用方法: 复制代码 代码如下: $('#YourContainerDiv').AeroWindow((WindowTitle:'hello world',)); 带全部参数的调用: 复制代码 代码如下: $('#YourContainerDiv').AeroWin
-
jQuery实现的模拟弹出窗口功能示例
本文实例讲述了jQuery实现的模拟弹出窗口功能.分享给大家供大家参考,具体如下: //初始化文档 $(document).ready(); //----------------弹出DIV仿模态窗口开始---------------- var divW; //DIV宽度 var divH; //DIV高度 var clientH; //浏览器高度 var clientW; //浏览器宽度 var divTitle; //DIV标题 var pageUrl; //DIV中加载的页面 var div
-
jQuery弹出窗口完整代码(居中,居左,居右)
核心代码: 复制代码 代码如下: //获取窗口的高度 var windowHeight; //获取窗口的宽度 var windowWidth; //获取弹窗的宽度 var popWidth; //获取弹窗高度 var popHeight; function init(){ windowHeight=$(window).height(); windowWidth=$(window).width(); popHeight=$(".window").height(); popWidth=$(
-
jQuery+jqmodal弹出窗口实现代码分明
先上图,最终效果如下 点击"信息确认" 就是弹出一个确认窗口,把已经填报的信息都放到里面看看. 信息放里面很简答,主要是弹出窗口要做得好看点. 所以选择了jQuery+jqmodal实现 实现方法如下1.页面中引用jquery-1.4.2.js和jqModal.js,注意jQuery要在前面,因为jqmodal是以jQuery为基础的. 2.建立jqModal.css,并引用,主要是些美工的东东,注意div.jqmDialog 的 display为 none.高度和宽度要设置好,挡住下
-
jQuery弹出窗口简单实现代码
今天讲了Jquery的弹出窗口的组成和用法: 先把引用文件的代码写好: // 每个弹窗的标识 var x =0; var idzt = new Array(); var Window = function(config){ //ID不重复 idzt[x] = "zhuti"+x; //弹窗ID //初始化,接收参数 this.config = { width : config.width || 300, //宽度 height : config.height || 200, //高度
-
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
本文实例讲述了jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法.分享给大家供大家参考,具体如下: 一.先描述下可以实现什么: 下拉框一改变,弹出框出现,选择弹出框中的值会赋值给下拉菜单 二.代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Subscribe策略</ti
-
jQuery实现弹出窗口中切换登录与注册表单
当点击页面中的登录或注册按钮时,将会弹出一个模态窗口,就是一个弹出层,我们可以在弹出层上轻松的切换登录与注册表单,极大的方便用户,不需要关闭层再去点击转向其他操作,在很多网站上已经广泛应用. 本文结合实例,通过使用jQuery以及CSS3和HTML5技术实现这一效果. HTML 我们现在主页面上设置两个链接按钮,即登录和注册按钮. <nav class="main_nav"> <ul> <li><a class="cd-signin&