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