1.引入jquery.nyroModal-1.6.2.pack.js
2.给nyroModal层添加样式，如关闭按钮，加载等样式
<style type="text/css">
/*
----------------------------
弹出层样式
----------------------------
*/
div#nyroModalFull {
font-size: 12px;
color: #777;
}
div#nyroModalFull div#nyroModalLoading {
border: 4px solid #777;
width: 150px;
height: 150px;
text-indent: -9999em;
background: #fff url('../images/ajaxLoader.gif') no-repeat;
background-position: center;
}
div#nyroModalFull div#nyroModalLoading.error {
border: 4px solid #f66;
line-height: 20px;
padding: 20px;
width: 300px;
height: 100px;
text-indent: 0;
background: #fff;
}
div#nyroModalFull div#nyroModalWrapper {
background: #fff;
border: 4px solid #777;
-moz-box-shadow: 0 0 90px 5px #000000;
}
div#nyroModalFull div#nyroModalWrapper a#closeBut {
position: absolute;
display: block;
top: -13px;
right: -13px;
width: 12px;
height: 12px;
text-indent: -9999em;
background: url('images/close.gif') no-repeat;
outline: 0;
}
div#nyroModalFull div#nyroModalWrapper h1#nyroModalTitle {
margin: 0;
padding: 0;
position: absolute;
top: -22px;
left: 5px;
font-size: 12px;
color: #ddd;
}
div#nyroModalFull div#nyroModalWrapper div#nyroModalContent {
overflow: auto;
}
div#nyroModalFull div#nyroModalWrapper div.wrapper div#nyroModalContent
{
padding: 5px;
}
div#nyroModalFull div#nyroModalWrapper div.wrapperImg div#nyroModalContent
{
position: relative;
overflow: hidden;
text-align: center;
}
div#nyroModalFull div#nyroModalWrapper div.wrapperImg div#nyroModalContent img
{
vertical-align: baseline;
}
div#nyroModalFull div#nyroModalWrapper div.wrapperImg div#nyroModalContent div
{
position: absolute;
bottom: 0;
left: 0;
background: black;
padding: 10px;
margin: 10px;
border: 1px white dotted;
overflow: hidden;
opacity: 0.2;
filter: alpha(opacity = 20);
}
div#nyroModalFull div#nyroModalWrapper div.wrapperImg div#nyroModalContent div:hover
{
opacity: 0.5;
filter: alpha(opacity = 50);
cursor: help;
}
div#nyroModalFull div#nyroModalWrapper a.nyroModalPrev,div#nyroModalFull div#nyroModalWrapper a.nyroModalNext
{
z-index: 105;
outline: none;
position: absolute;
top: 0;
height: 100%;
width: 40%;
cursor: pointer;
text-indent: -9999em;
background: left 20% no-repeat;
background-image: url(data:image/gif;base64,AAAA); /* Trick IE6 */
}
div#nyroModalFull div#nyroModalWrapper div.wrapperSwf a.nyroModalPrev,div#nyroModalFull div#nyroModalWrapper div.wrapperSwf a.nyroModalNext,div#nyroModalFull div#nyroModalWrapper div.wrapper a.nyroModalPrev,div#nyroModalFull div#nyroModalWrapper div.wrapper a.nyroModalNext
{
height: 60%;
width: 20%;
}
div#nyroModalFull div#nyroModalWrapper div#nyroModalContent a.nyroModalPrev
{
left: 0;
}
div#nyroModalFull div#nyroModalWrapper div#nyroModalContent a.nyroModalPrev:hover
{
background-image: url('../images/prev.gif');
}
div#nyroModalFull div#nyroModalWrapper div#nyroModalContent a.nyroModalNext
{
right: 0;
background-position: right 20%;
}
div#nyroModalFull div#nyroModalWrapper div#nyroModalContent a.nyroModalNext:hover
{
background-image: url('../images/next.gif');
}
</style>
图片为附件中的对应图片
3.写页面内容
<body>
<a href="#out" id="aa">弹出</a>
<div id="out" style="display: none; width:200px; height:100px">
弹出层的内容:
<input id="content" type="text">
</div>
</body>
其中超链接的href中#后面的要对应弹出层的id，其中id为out的层，style中的样式为弹出的宽和高
4.js代码
<script type="text/javascript">
$(function(){
$.nyroModalSettings({
minWidth: 200, // Minimum width
minHeight: 100, // Minimum height
showBackground: function (elts, settings, callback) {
elts.bg.css({
opacity:0
}).fadeTo(500, 0.6, callback);
}
});
$('#aa').nyroModal({
endShowContent:function(){
$("#content").attr("value","");
}
});
});
</script>
其中minWidth和minHeight为最大和最小宽度、高度， $('#aa').nyroModal({})中aa为超链接的id，endShowContent指定函数为弹出时要执行的操作
分享到：
相关推荐
首先，标题"jquery弹出层特效"指的是使用jQuery库创建的弹出窗口或模态对话框效果。在网页设计中，弹出层通常用于显示警告信息、用户登录表单、确认对话框或其他需要在当前页面之上显示的内容，而不会中断用户的浏览...
标题“jquery弹出层”暗示我们将会探讨的是如何使用jQuery来实现网页上的弹出层效果，这在网页设计中是非常常见的一种功能，用于显示警告、信息、确认对话框或者复杂的模态窗口。 首先，让我们理解什么是弹出层。弹...
例如，我们可以使用`$(element).draggable()`方法使弹出层具备拖动功能，同时使用CSS定位使其浮动于页面之上。 描述中提到，由于这是一个简化版，可能不适用于已有CSS框架的项目，因此没有提供`cssurl`属性和`...
这里，我们主要讨论如何使用jQuery实现这样的功能，即在一个弹出层（通常是一个模态对话框）显示时，用户可以操作父页面而不会导致弹出层关闭。 首先，jQuery是一个强大的JavaScript库，它提供了丰富的API来处理DOM...
《jQuery弹出层插件深度解析》 在Web开发领域，jQuery库因其简洁的API和强大的功能而广受开发者喜爱。对于用户交互和界面展示，弹出层（Modal）是不可或缺的一部分，它能够吸引用户的注意力并提供额外的信息或操作...
本文将详细介绍一个名为“jQuery弹出层插件”的工具，该插件以其轻量级、易于使用和高度可定制化的特点，深受开发者喜爱。 首先，我们了解下什么是jQuery。jQuery是由John Resig于2006年创建的一个JavaScript库，它...
为了简化这个过程，许多开发者选择使用预封装的jQuery弹出层插件，如`jQuery UI Dialog`、`Bootstrap Modal`或者本文提及的"3K大小的万能jQuery弹出层类库146"。这些插件提供了预设的样式和行为，只需几行代码就能...
标题中的“一款不错的Jquery弹出层插件”指的是一个基于JavaScript库JQuery设计的用于创建弹出对话框或模态窗口的插件。在网页交互设计中，弹出层通常用于显示通知、提示信息、表单或者进行确认操作，为用户提供一种...
在"Default.aspx"和"Default2.aspx"这两个页面中，可能就包含了使用jQuery实现弹出层的示例代码。"Web.config"是ASP.NET应用程序的配置文件，可能包含了jQuery库的引用设置。"51Aspx源码必读.txt"可能是关于阅读和...
"jQuery弹出层背景变暗"这个话题涉及到在使用jQuery时，如何创建一个具有半透明暗色背景的弹出层（也称为对话框或模态窗口），以突出显示弹出内容并降低页面其他部分的视觉干扰。 首先，我们需要理解jQuery弹出层的...
除了基本的图片展示，SexyLightBox还可以与其他jQuery插件结合使用，例如，配合jQuery的Ajax功能来创建动态的弹出层内容，或者与视频播放器插件配合展示视频内容。 总的来说，SexyLightBox是一款强大而易用的弹出层...
本篇将详细介绍jQuery弹出层插件，以及如何使用名为"Popup Div"的实例。 首先，jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。利用jQuery，开发者可以更方便地...
jQuery弹出层插件在网页开发中非常常见，它们用于创建弹窗、模态对话框、图片预览等效果，增强了用户体验。以下是一些流行的jQuery弹出层插件及其特点： 1. **Thickbox**: Thickbox是一款轻量级的jQuery插件，用于...
标题中的“jquery弹出层鼠标点击弹出层可浮动在屏幕滚动”指的是使用jQuery实现的弹出层功能，当用户点击文字或图片时，弹出层会出现在屏幕中央，并且能随着浏览器窗口的滚动而保持相对位置，始终在用户的视线范围内...
4. **初始化组件**：使用jQuery选择器找到弹出层元素，并调用插件提供的初始化方法。 5. **配置和使用**：根据需求设置弹出层的属性，如宽度、高度、iframe的URL等。然后通过调用插件的方法来打开、关闭或更新弹出层...
本篇将深入探讨如何使用jQuery创建超炫的弹出层特效，以提升网站的用户体验。 一、jQuery弹出层基础 1. 弹出层定义：弹出层通常是指在页面原有内容上临时显示的一块浮动区域，它可以是对话框、图片预览、表单填写...
在 `letDivCenter()` 函数中，我们使用 JQuery 的 `offset()` 方法来获取窗口的高度和宽度，然后计算弹出层的位置，并使用 `css()` 方法来设置弹出层的位置和显示状态。 在 `showAll()` 函数中，我们调用 `showMask...
本篇文章将深入探讨如何使用jQuery实现弹出层功能，以及相关源码分析和应用工具。 首先，jQuery库简化了JavaScript的操作，使创建弹出层变得更为简单。jQuery Popup，即基于jQuery的弹出层插件，能够帮助开发者快速...
jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难，只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如：我想要这里是弹出浮动遮罩层</div> 并随页面...