jquery实现弹出层效果实例
本文实例讲述了jquery实现弹出层效果的方法。分享给大家供大家参考。具体实现方法如下：
<head runat="server">
<title>jQuery弹出层</title>
<script type="text/javascript" src="js/jquery-1.3.2-min.js"></script>
<script type="text/javascript">
$(function() {
$("#btnShow").click(function() {
// var str = "我是弹出对话框";
// $(".form").html(str);
$("#BgDiv").css({ display: "block", height: $(document).height()});
var yscroll = document.documentElement.scrollTop;
$("#DialogDiv").css("top", "100px");
$("#DialogDiv").css("display", "block");
document.documentElement.scrollTop = 0;
});
$("#btnClose").click(function() {
$("#BgDiv").css("display", "none");
$("#DialogDiv").css("display", "none");
});
});
</script>
<style type="text/css">
body, h2
{
margin: 0;
padding: 0;
}
#BgDiv
{
background-color: #e3e3e3;
position: absolute;
z-index: 99;
left: 0;
top: 0;
display: none;
width: 100%;
height: 1000px;
opacity: 0.5;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
}
#DialogDiv
{
position: absolute;
width: 400px;
left: 50%;
top: 50%;
margin-left: -200px;
height: auto;
z-index: 100;
background-color: #fff;
border: 1px #8FA4F5 solid;
padding: 1px;
}
#DialogDiv h2
{
height: 25px;
font-size: 14px;
background-color: #8FA4F5;
position: relative;
padding-left: 10px;
line-height: 25px;
}
#DialogDiv h2 a
{
position: absolute;
right: 5px;
font-size: 12px;
color: #000000;
}
#DialogDiv .form
{
padding: 10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="BgDiv"></div>
<div id="DialogDiv" style="display: none">
<h2>
弹出层<a href="#" id="btnClose">关闭</a></h2>
<div class="form">
我是弹出对话框!!<br />
我是弹出对话框!!<br />
我是弹出对话框!!<br />
我是弹出对话框!!<br />
我是弹出对话框!!<br />
我是弹出对话框!!<br />
我是弹出对话框!!<br />
</div>
</div>
<p>
</p>
<p align="center">
<input value="弹出" class="but" type="button" id="btnShow" />
</p>
</form>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。
相关推荐
-
Jquery弹出层插件ThickBox的使用方法
thickbox是jQuery的一个插件,其作用是弹出对话框.网页框,使用户体验度更加愉悦,下面就来简单介绍它的几种用法. 声明一下:这只是个人的总结记载而已. 准备工作:你需要三个文件:thickbox.js.thickbox.css.jquery.js,网上到处可下 具体使用: 第一步:将这三个文件引入到你要使用thickbox的页面 复制代码 代码如下: <script type="text/javascript" src="jquery.js">
-
jquery实现可自动判断位置的弹出层效果代码
本文实例讲述了jquery实现可自动判断位置的弹出层效果代码.分享给大家供大家参考.具体如下: 这是一款jquery实现的智能弹出层效果,位置可以自适应,当层靠右边显示时自动往左移.初次运行时请按F5刷新,载入远程jQuery后才能看到效果,点击鼠标左键,弹出层将出现,在最右边点击时层自动往左移. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-auto-check-pos-alert-dlg-demo/ 具体代码如下: <!DOC
-
div弹出层的ajax登录(Jquery版+c#)
页面初始化,界面如图所示: Server name文本框获取焦点时候,界面如图所示(这里可以改成你登录的验证码): 可以加载SQL Server服务列表,也是我的简易SQL查询分析器评论中静夜妙思给予的方法,非常感谢! 加载列表如下图所示: 可以随意地点击添加到Server name中,登录时截图所示: 文本框验证都写好了!还有Authentication验证方式,windows验证下面Login,Password文本框禁掉!由于时间原因,不上图了 demo.html(全部前台代码,js/css
-
jQuery实现的AJAX简单弹出层效果代码
本文实例讲述了jQuery实现的AJAX简单弹出层效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!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/
-
jQuery插件zoom实现图片全屏放大弹出层特效
1.介绍 jQuery制作zoom图片全屏放大弹出层插件. 2.使用方法 1.引入以下的js和css文件 <link rel="stylesheet" href="css/zoom.css" media="all" /> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/zoom.min.js&quo
-
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
本文实例讲述了jquery实现仿新浪微博带动画效果弹出层代码.分享给大家供大家参考.具体如下: 这是一款jquery实现带动画的弹出层,最开始是模拟新浪微博中的弹出层,后来引入了jQuery,又想了想,加入点动画效果不知怎么样,后来就写出了这么一个弹出的网页层效果,你点击按钮后就可以看到一个渐出的可关闭的弹出层,点击关闭后,当然也是渐渐的消失的,移动时根据鼠标位置计算控件左上角的绝对位置,松开鼠标后停止移动并恢复成不透明. 运行效果截图如下: 在线演示地址如下: http://demo.jb51
-
jQuery弹出层插件Lightbox_me使用指南
网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下,支持完美.而在例如ie8一下的浏览器下显示不出应有的效果.例如jquery.avgrund插件在ie8下就无法显示. 本文介绍的插件Lightbox_me可以完美的支持chrome,firefox和ie7,ie8,ie9等主流浏览器. 1.Lightbox_me插件功能 用于显示弹出层 2.Ligh
-
jquery实现简单实用的弹出层效果代码
本文实例讲述了jquery实现简单实用的弹出层效果.分享给大家供大家参考.具体如下: 目前来说,我还是喜欢这个自己改造的弹出层,在项目中用的也是这个.引入了新版的jquery插件,方框及文字都可以自己定义,非常方便,希望大家也喜欢这款弹出层,JavaScript在本例中也充分发挥了作用,对学习JS也是不错的参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-alert-style-demo/ 具体代码如下: <!D
-
jQuery+html5实现div弹出层并遮罩背景
渐入弹窗,背景变色不可点击.查看效果:http://runjs.cn/detail/t08gmoij <!doctype html> <html> <head> <meta charset="utf-8"> <title>popup</title> <script type="text/javascript" src="jquery-2.1.3.min.js">&
-
jquery简单的弹出层浮动层代码
jquery 智能弹出层,位置可以自适应,当层靠右边显示时自动往左移.初次运行时请按F5刷新,载入远程jQuery后才能看到效果,点击鼠标左键,弹出层将出现,在最右边点击时层自动往左移. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmln
-
jQuery点缩略图弹出层显示大图片
2015年繁忙的一月份,无更多时间去学习ASP.NET MVC程序,二月份又是中国的新年,长达半个月的假期,望回到老家中,在无电脑无网络的日子里,能有更多时间陪伴年迈的父母亲. 今天学习jQuery的相关知识,应用到图片上,用户点一点图片,放大显示图片功能. 创建一个控制器FebY15Controller: 接下来创建视图Index: 标记1,添加图片样式: 标记2,添加htm代码,原片显示以及放大图片的占位div标签: 标记3,引用jQuery类库. 标记4,编写jQuery程序: 下面是动态