jquery弹出层

愚盦 2011-08-21 

<!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弹出层实例</title>

<script type="text/javascript" src="js/jquery-1.4.4.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 >
<div id="BgDiv"></div>

<div id="DialogDiv" style="display:none">

<h2>弹出层<a href="#" id="btnClose">关闭</a></h2>

<div class="form">

我是弹出对话框！！

</div>

</div>

<p> </p>

<p align="center">

<input value="弹出" class="but" type="button" id="btnShow" />

</p>

</body>

</html>
 
愚盦

愚盦

相关推荐

jQuery弹出层登录和全屏注册表单

jQuery弹出层登录和全屏注册表单，这是一款很漂亮的jQuery登录和注册表单，点击登录时弹出一个登录窗口并伴随动画效果，注册页面则是全屏显示，非常时尚的jQuery表单。<meta name="viewport" conten

suis / 0评论 2014-01-13

Jquery学习之路(三) 实现弹出层插件

弹出层的应用还是比较多的，登陆，一些同页面的操作，别人的总归是别人的，自己的才是自己的，所以一直以来想写个弹出层插件。不多废话，直接开始吧！要弹出层，先要用一个遮罩层挡在下面的页面，此遮罩层是全屏的，页面滚动也要有，所以设置position: fixed;

Hhjian / 0评论 2014-05-31

jQuery弹出层BlockUI的用法(包括登陆界面)

</script></head><body> <form id="form1" runat="server"> <div> <input id=&qu

83457317 / 0评论 2012-02-05

弹出层

<!--. margin-bottom: 3px;display: none;position: absolute;background: #FFF;border: solid 1px #6e8bde;background-color: #3357B

我只是个程序员 / 0评论 2015-09-11

效果非常好的 Jquery弹出层插件 jQuery Sweet alert

介绍款交互性非常不错的jquery弹出层插件，支持消息提示、错误提示、确认框提示等。交互式体验感非常不错，比如咱们现在体验非常不错的微信支付、支付宝等完成后的效果。使用方式也特别简单、粗暴，符合大众的jquery插件使用方法。欢迎大家去学徒帮分享更多jQu

87443561 / 0评论 2015-08-10

jQuery: 仿select下拉框效果，点击空白关闭弹出层，判断是否被mouseover

<!<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />. e.stopPropagation();$(&quo

83510998 / 0评论 2015-05-19

超炫的弹出层效果Fancybox

Fancybox具有很强大的功能，它可以加载DIV，图片、图片集、Ajax数据，还能加载SWF影片，iframe页面等等。本文讲演示七种弹出层示例。

suis / 0评论 2015-05-11

Jquery学习之路(三) 实现弹出层插件

弹出层的应用还是比较多的，登陆，一些同页面的操作，别人的总归是别人的，自己的才是自己的，所以一直以来想写个弹出层插件。不多废话，直接开始吧！要弹出层，先要用一个遮罩层挡在下面的页面，此遮罩层是全屏的，页面滚动也要有，所以设置position: fixed;

DevilPace / 0评论 2014-05-31

JQuery.BlockUI，JQuery弹出层插件（转）

JQuery.BlockUI是众多JQuery插件弹出层中的一个，它小巧,容易使用, 功能齐全，支持Iframe，支持Modal，可定制性高也意味他默认谦虚的外表。jQuery的BlockUI插件可以让你在使用AJAX时模拟同步行为，锁定浏览器。当被激活时

momode / 0评论 2014-04-29

JQuery.BlockUI，JQuery弹出层插件（转）

JQuery.BlockUI是众多JQuery插件弹出层中的一个，它小巧,容易使用, 功能齐全，支持Iframe，支持Modal，可定制性高也意味他默认谦虚的外表。jQuery的BlockUI插件可以让你在使用AJAX时模拟同步行为，锁定浏览器。当被激活时

81423067 / 0评论 2014-03-12

jQuery弹出层登录和全屏注册表单

jQuery弹出层登录和全屏注册表单，这是一款很漂亮的jQuery登录和注册表单，点击登录时弹出一个登录窗口并伴随动画效果，注册页面则是全屏显示，非常时尚的jQuery表单。<meta name="viewport" conten

lkj0 / 0评论 2014-01-13

jsp页面字符串截取，点击弹出弹出层

<!--弹出层js-->. <!--base64编码解码-->. <script type="text/javascript" src="${path}/js/Base64-80.js"

无情 / 0评论 2013-08-20

jQuery EasyUI1.3.2 弹出层在IE下被ActiveX控件遮挡解决方案

最近项目在使用jQuery EasyUI1.3.2 ，但是也面临了各种难堪的情况，还是只有一个一个的解决了。解决combo组件弹出层被控件遮挡的问题。var _12 = $.appendTo;代码混淆后变量名可能一样，如果找不到可查找 "<

海欣海夜 / 0评论 2013-04-18

使用jquery的blockui插件显示弹出层

在做网站的开发过程中，可能需要使用弹出层，使用jquery的blockui插件可以很轻松的实现这个效果。blockui可以在你发送ajax请求的时候，显示一个遮罩层禁止用户对页面进行操作并显示提示信息；或者用来显示一个登陆窗口，也可用来显示图片等。bloc

89203856 / 0评论 2012-04-17

Jquery弹出层插件Thickbox

thickbox使用tb_show()函数在body后面加入弹出层。可以使用window.top.tb_show()把弹出层加到页面上。我的tihickbox插件中修改如下：在tb_init（）中把tb_show替换如下。这样只只要在原来的链接上加入TB_

AnneZhao / 0评论 2011-11-23

jQuery控件 SimpleModal（弹出层带遮罩控件)

SimpleModal是一个轻量级的jQuery插件，它为模态窗口的开发提供了一个强有力的接口。SimpleModal给予你灵活性，然而却屏蔽了UI开发中的跨浏览器相关问题。在作为一个链式的jQuery函数，你可以在一个jQuery元素上调用modal()

zhangyang0 / 0评论 2011-09-15

jQuery弹出层插件大全

目前用的比较多的，最新版本是thickbox3.1

崔博伦一路有你 / 0评论 2011-07-14

jQuery弹出层插件大全

目前用的比较多的，最新版本是thickbox3.1. jQuery插件flexigrid使用总结

愚盦 / 0评论 2011-04-21

JQuery 学习笔记之：美妙的标题提示 弹出层

#tooltip p {color:#fff;font:12px 'Microsoft YaHei',Arial,宋体,Tahoma,Sans-Serif;}. #tooltip p em {display:block;margin-top:3px;col

zfjdoreen / 0评论 2011-03-30

12个ajax弹出层效果js代码(转载)

Thickbox–基于jQuery，支持AJAX，轻量级的而且比较高效。支持图片与HTML内容。大小约为40k，目前还可作为WordPress的插件使用。这个js的优点在于与，父级的原页面滚动条随鼠标滚动的时候，弹出的层并不移动，而始终处于浏览器的固定位置

83457317 / 0评论 2011-03-03

分享几个超级轻量级的JavaScript插件，包括树和行滚动公告、图表绘制、弹出层等等

看到上面的效果了吗，这些效果比marquee丰富多了，可以实现多个区域同时、不同方向的滚动，而这一切仅仅用一个jQuery插件就能够搞定，对于该插件，上面的效果CSS都是帮你写好了的，可以说是真正的拿来即用的插件。有了这个插件，我们能够在移动端提供各种各样

zhangmingming / 0评论 2017-07-26

弹出层插件 jqgrid的使用

因为jqGrid3.6及以后的版本集成了jQuery UI，所以，此处需要导入UI相关js和css。其中list是页面上的一个table：&lt;table id="list"&gt;&lt;/table&

83284158 / 0评论 2018-07-14

web 前端常用组件之Layer弹出层组件

经手几个项目，还是感觉 Layer 用起来比较的轻松，你能想到的 Layer 都能帮你做到。Layer 具备全方位的解决方案，致力于服务各水平段的开发人员，让页面轻松地拥有丰富友好的操作体验。Layer 尽可能地在以更少的代码展现更强健的功能，注重性能的提

张小程 / 0评论 2016-09-22

BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法

弹出框与工具提示类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API来填充。该方法依赖于工具提示。self.$tip.data;//触发popover框的点击事件时可以获取id

soulis / 0评论 2016-04-03

jQuery弹出层插件popShow(改进版)用法示例

本文实例讲述了jQuery弹出层插件popShow(改进版)用法。分享给大家供大家参考，具体如下：。前面一篇《jQuery弹出层插件popShow用法示例》分析了popShow插件的基本用法，这里再对插件进行一番改进。<script src=&quo

gxr / 0评论 2017-01-23

jQuery弹出层插件popShow用法示例

本文实例讲述了jQuery弹出层插件popShow用法。分享给大家供大家参考，具体如下：。<script src="popShow.js" type="text/javascript"></scri

刘阿飞 / 0评论 2017-01-23

jQuery+HTML5实现弹出创意搜索框层

本效果适用于移动设备，可以使用手机等浏览效果。<input type="text" class="search-input" placeholder="请输入关键词" name="

waterv / 0评论 2016-12-29

jQuery使用Layer弹出层插件闪退问题

巨坑，基础没学好，导致找了一个下午的问题，终于被我发现了。说多都是泪，记录下来，以后有人遇到这个错误可以参考下。做项目期间做了几个页面，需要用到弹出层，为了方便使用到了Layer的插件，然后写点击事件在form表单中，接着，又使用button按钮，同样放在

warhin / 0评论 2016-12-22

jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】

本文实例讲述了jQuery实现带遮罩层效果的blockUI弹出层。分享给大家供大家参考，具体如下：。css = 弹出内容的样式，其中属性需要写成 js 的形式，如 background-color => backgroundColor. 完整实例代码

86403563 / 0评论 2016-09-14

js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例

本文实例讲述了js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件。分享给大家供大家参考。完整实例代码点击此处本站下载。<input type="button" id="btn_dialog" value=&

87374459 / 0评论 2015-04-29

jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)

弹出层主要用于展示丰富的页面信息，还有一个更好的应用是弹出表单层丰富交互应用。常见的应用有弹出登录表单层，用户提交登录信息，后台验证登录成功后，弹出层消失，主页面局部刷新用户信息。本文我们将给大家介绍如何使用jQuery+Ajax+PHP弹出层异步登录的应

sunnylin / 0评论 2019-04-26

jQuery 弹出层插件(推荐)

最近在研究弹出层插件时发现网上很多插件功能很强大，同时插件也很庞大。在这里个人写了一个比较秀珍的弹出层插件。content: "content", //弹出层的内容。if ($.browser.msie && ($.br

81473560 / 0评论 2016-05-24

jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)

弹出层用来向用户展示详细的信息，交互性非常强。弹出层有对话框、模态窗口等形式，这里我都把他们叫做弹出层，我的同事们也是这么叫的。一般我们喜欢使用比较成熟的弹出层插件如fancybox等，但在本文，我将先抛弃插件，给大家介绍如何使用jQuery+CSS3+H

88417615 / 0评论 2019-04-25

jquery弹出遮掩层效果【附实例代码】

找了个别人写的遮掩层进行改善，感觉效果还可以。#main .btn:hover{vertical-align:middle; color: #fff; font-weight:bold; text-decoration:none;display:block

钱多多 / 0评论 2019-04-25

Jquery插件之Fancybox丰富的弹出层效果附源码下载

Fancybox是一款优秀的jquery插件，它能够展示丰富的弹出层效果。前面我们有文章介绍了facybox弹出层效果，相比facybox，fancybox显得功能更为齐全，它除了可以加载DIV，图片、图片集、Ajax数据，还能加载SWF影片，iframe

yaasshole / 0评论 2019-04-23

jquery实现简单实用的弹出层效果代码

本文实例讲述了jquery实现简单实用的弹出层效果。分享给大家供大家参考。目前来说，我还是喜欢这个自己改造的弹出层，在项目中用的也是这个。引入了新版的jquery插件，方框及文字都可以自己定义，非常方便，希望大家也喜欢这款弹出层，JavaScript在本例

seoppt / 0评论 2015-10-15

jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)

本文实例讲述了jquery实现仿新浪微博带动画效果弹出层代码。分享给大家供大家参考。这是一款jquery实现带动画的弹出层，最开始是模拟新浪微博中的弹出层，后来引入了jQuery，又想了想，加入点动画效果不知怎么样，后来就写出了这么一个弹出的网页层效果，你

83991231 / 0评论 2015-10-12

jquery实现可自动判断位置的弹出层效果代码

本文实例讲述了jquery实现可自动判断位置的弹出层效果代码。分享给大家供大家参考。这是一款jquery实现的智能弹出层效果，位置可以自适应，当层靠右边显示时自动往左移。初次运行时请按F5刷新，载入远程jQuery后才能看到效果，点击鼠标左键，弹出层将出现

前端档案 / 0评论 2015-10-12

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

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

warhin / 0评论 2015-09-19

jQuery实现点击按钮弹出可关闭层的浮动层插件

本文实例讲述了jQuery实现点击按钮弹出可关闭层的浮动层插件。分享给大家供大家参考。这是一款由漫画Jquery弹出层插件改编而来，小鸟Js弹窗插件，按ESC可以关闭窗口。默认不带样式，大家可以根据自己的项目写样式。弹出层代码很小，min版的只1.15k，

87407607 / 0评论 2015-09-19

jQuery实现鼠标点击弹出渐变层的方法

弹出层在实际应用中我们经常会碰到大量的弹出层效果，下面我来做一个基于jquery的简单的弹出层效果实例，各位朋友有兴趣可参考。$.css;//设置弹出层位置。$.click;//单击空白区域隐藏

yaasshole / 0评论 2019-04-21

jquery实现弹出层效果实例

本文实例讲述了jquery实现弹出层效果的方法。分享给大家供大家参考。// var str = "我是弹出对话框";

舜岳 / 0评论 2015-05-19

jQuery弹出层插件Lightbox_me使用指南

网站开发过程中，为了增加网站交互效果，我们有时需要在当前页面弹出诸如登陆、注册、设置等窗口。而这些窗口就是层，弹出的窗口就是弹出层。jQuery中弹出层插件很多，但有些在html5+css3浏览器下，支持完美。而在例如ie8一下的浏览器下显示不出应有的效果

81971235 / 0评论 2019-04-20

jQuery插件zoom实现图片全屏放大弹出层特效

jQuery制作zoom图片全屏放大弹出层插件。<script src="js/zoom.min.js"></script>2.在head标签中加入以下js代码。body{overflow-y:scroll;fo

mengyun00 / 0评论 2019-04-20

jQuery拖拽 & 弹出层 介绍与示例

iDrag & iDialog 介绍特点：iDialog.js依赖于jquery编写的简单易用的对话框，同时还可以通过添加css3，改变对话框的展现动画。提供了两个方法：。渐进增强的体验:确保IE家族功能完善的前提下，现代浏览器适当的添加css3增

yangmingxing0 / 0评论 2013-12-27

jquery处理页面弹出层查询数据等待操作实例

本文实例讲述了jquery处理页面弹出层查询数据等待操作。分享给大家供大家参考。具体实现方法如下：。希望本文所述对大家的jQuery程序设计有所帮助。

xiongfeng / 0评论 2015-03-25

jQuery实现渐变弹出层和弹出菜单的方法

本文实例讲述了jQuery实现渐变弹出层和弹出菜单的方法。分享给大家供大家参考。#UpLayer span{border:#fff 1px solid; width:80px; padding:0 5px; line-height:20px; displa

草莓酱 / 0评论 2015-02-20

jQuery点缩略图弹出层显示大图片

2015年繁忙的一月份，无更多时间去学习ASP.NET MVC程序，二月份又是中国的新年，长达半个月的假期，望回到老家中，在无电脑无网络的日子里，能有更多时间陪伴年迈的父母亲。今天学习jQuery的相关知识，应用到图片上，用户点一点图片，放大显示图片功能。

mengyun00 / 0评论 2019-04-20

Jquery 实现弹出层插件

弹出层的应用还是比较多的，登陆，一些同页面的操作，别人的总归是别人的，自己的才是自己的，所以一直以来想写个弹出层插件。不多废话，直接开始吧！要弹出层，先要用一个遮罩层挡在下面的页面，此遮罩层是全屏的，页面滚动也要有，所以设置 position: fixed

83991231 / 0评论 2019-04-20