jQuery弹出层nyroModal的应用 _Web前端

jQuery弹出层nyroModal的使用

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指定函数为弹出时要执行的操作