Jquery弹出层，背景变暗居中

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>弹窗</title><script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){$(".loginCloseX").click(function(){$("#loginZhe").fadeOut("slow");$("#login").fadeOut("slow");});$("#showBox").click(function(){$("#loginZhe").height($(document).height()+"px");$("#login").css("top", (($(window).height() - $("#login").height()) / 2) + $(document).scrollTop());$("#login").css("left",($(window).width()-$("#login").width())/2);$("#loginZhe").fadeTo("slow",0.5);$("#login").fadeIn("slow");});  $(".loginTitle").mousedown(function(a){var divX = $(this).offset().left;var divY = $(this).offset().top;var jianX = a.pageX-$(this).offset().left;var jianY = a.pageY-$(this).offset().top;$(".loginTitle").mousemove(function(e){$("#login").css("left",e.pageX-jianX);$("#login").css("top",e.pageY-jianY);});});$(".winTitle").mouseup(function(){$(".winTitle").unbind("mousemove");});});
</script>
<style type="text/css">
body{ margin:0; padding:0; line-height:1.6; font-size:12px; font-family:Arial, Helvetica, sans-serif; height:100%;}
#login{ height:200px; width:400px; position:absolute; top:200px; left:200px; background:#FFF; z-index:2; display:none;}
#loginZhe{ background:#000000;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5; width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; display:none;}
.loginBoder{ position:absolute; left:-8px; top:-8px; width:416px; height:216px; background:#CCC;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5; z-index:-1}
.loginTitle{ padding:2px 8px; border-bottom:1px solid #CCC; background:#EBEBEB; z-index:99999;}
.loginContent{ background:#FFF; z-index:4; padding:4px; height:168px;}
.loginCloseX{ float:right; padding:2px 8px; cursor:pointer; position:absolute; top:0; right:0;font-weight:800; color:#333;}
</style><div id="loginZhe"></div>
<a href="#" id="showBox">显示</a>
<div id="login"><div class="loginTitle">这里是标题</div><div class="loginContent">这里是内容</div><div class="loginBoder"></div><div class="loginCloseX">X</div>
</div>

Jquery弹出层，背景变暗居中相关推荐

JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
html 弹出层插件,jQuery弹出层插件(原创)
插件描述:简约的jQuery弹出层插件更新时间:2020-01-17 23:37:28 更新说明:版本v4.3.0 1.修复最大化可拖动.改变大小的问题 2.去除对于图片的依赖 3.更新拖动插件 4 ...
jQuery弹出层登录和全屏注册表单
jQuery弹出层登录和全屏注册表单,这是一款很漂亮的jQuery登录和注册表单,点击登录时弹出一个登录窗口并伴随动画效果,注册页面则是全屏显示,非常时尚的jQuery表单. 代码: <!DOC ...
jbox弹窗_强大的jquery弹出层插件jBox
jBox是一款功能强大的jquery弹出层插件.jBox插件可以用来创建tooltips提示框.模态窗口.图片画廊等多种效果. 使用方法在页面中引入jBox.all.min.css.jquery和j ...
Jquery弹出层插件ThickBox的使用方法
这篇文章主要介绍了Jquery弹出层插件ThickBox的使用方法,需要的朋友可以参考下 thickbox是jQuery的一个插件,其作用是弹出对话框.网页框,使用户体验度更加愉悦,下面就来简单介绍它 ...
[置顶] 推荐一款好用的jquery弹出层插件——wbox
在我们做项目的过程中难免会让弹出层来展示一些信息,这里推荐一款比较不错的jquery插件,下面说一下特点和新版本增加的功能 wBox特点背景透明度可以根据实际情况进行调节可以根据需要添加wBox标 ...
推荐一款好用的jquery弹出层插件——wbox
阅读原文:http://www.xuejiehome.com/blread-1621.html 在我们做项目的过程中难免会让弹出层来展示一些信息,这里推荐一款比较不错的jquery插件,下面说一下特点 ...
3K 万能JQuery弹出层类库
代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
layer——极简的jquery弹出层插件
官网:http://layer.layui.com/ 作者:贤心 jquery layer是layUI库的成员,一直致力于为web开发提供动力. jquery layer弹出层插件支持单击弹出,自动 ...
jquery 弹出层插件
最近在研究弹出层插件时发现网上很多插件功能很强大,同时插件也很庞大.在这里个人写了一个比较秀珍的弹出层插件. jquery.popdialog.js $(function () {$.fn.PopDi ...

Jquery弹出层，背景变暗居中

Jquery弹出层，背景变暗居中相关推荐

最新文章

热门文章

Jquery弹出层，背景变暗 居中

Jquery弹出层，背景变暗 居中相关推荐

最新文章

热门文章

Jquery弹出层，背景变暗居中

Jquery弹出层，背景变暗居中相关推荐