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 弹出层jquery 弹出层
jquery弹出层代码,ajax异步获取页面,弹出层登录!
jquery弹出层背景变暗 Ajax jquery弹出层背景变暗_Ajax
jquery弹出层当鼠标点击文字或图片弹出层,弹出层浮动在屏幕上可以随浏览器上下滚动,弹出层可自动居中在页面中间
jquery弹出层特效超炫jquery弹出层特效超炫jquery弹出层特效超炫
这个可以自定义的 可以弹出层关闭 父页面刷新 ,可以弹出层不关闭 父页面刷新
jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难,只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如:我想要这里是弹出浮动遮罩层</div> 并随页面...
jquery圆角jquery圆角jquery圆角jquery圆角jquery圆角jquery圆角jquery圆角jquery圆角
JQuery弹出层插件,Popup div 实例,前段弹窗插件
jQuery弹出层插件大全_爱上DIV + CSS_.doc
jquery 弹出层插件下载(简单、易用)
jQuery弹出层垂直居中效果 jQuery弹出层垂直居中效果 jQuery弹出层垂直居中效果 jQuery弹出层垂直居中效果
基于jQuery弹出层插件thickbox 智能提示
jQuery弹出层插件三种简单遮罩弹出框效果
基于jQuery弹出层有9种效果,都是很实用的效果,大家可以来试试
jquery 弹出层 tipswindownjquery 弹出层 tipswindownjquery 弹出层 tipswindown
用于登录的jQuery 弹出层例子代码 用于登录的jQuery 弹出层例子代码
jquery弹出div层,并让背景遮罩不可选