- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title> jquery弹出层效果,可随滚动条滚动 </title>
- <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
- <script type="text/javascript" src1="js/jquery.js"></script>
- <style type="text/CSS">
- *{margin:0px; padding:0px; font-size:12px;}
- a{color:#0000FF;}
- a:hover{color:#0000FF;}
- </style>
- </head>
- <body>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- <input type="button" value="弹出" onclick="$('#popup').show();" /><br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- 1 <br>
- <!-- 主要部分 -->
- <div id="popup" class="popup_box" style="display:none;">
- <style type="text/css">
- .ulogin{width:230px; height:30px; line-height:30px; border:1px solid #D5D5D5;}
- .savetime{width:100px; height: 20px; line-height:20px; border:1px solid #DFDFDF;}
- .savetime option {line-height:20px;}
- .login_btn{width:300px; text-align:left;}
- .login_btn a{margin:0px 6px; _margin:0px 0px;}
- .login_btn .login_a{ width: 24px; height:30px; line-height:30px; padding:6px 25px; background-color:#7CDAFF; color: #DFDFDF; overflow:hidden;}
- .popup_title{width:100%; height:30px; line-height:30px; background-color:#DFDFDF;}
- .popup_title dt{width:95%; float:left; text-indent:1em; font-weight:bold;}
- .popup_title dd{width:4%; float:right;}
- .popup_content{width:100%; height:30px; line-height:30px; padding:10px 0px 20px 0px; background-color:#FFF;}
- .popup_content li{width:100%; float:left; text-indent:0.5em; overflow:hidden;}
- ol.popup_content li{list-style-type:lower-roman;}
- </style>
- <div id="maskLevel" style="position: absolute; top: 0px; left: 0px; text-align: center; z-index: 1000; background:#000; filter:alpha(opacity=10); opacity: 0.1; -moz-opacity:0.1; width: 100%; height: 100%;"></div>
- <div style="position: absolute; top: 200px; left: 30%;z-index: 1001; background:#FFF; width: 410px; height: auto; border:5px solid #666666; padding-bottom:10px;">
- <dl class="popup_title">
- <dt>弹出标题</dt>
- <dd><a href="javascript:;" onclick="$('#popup').hide();">X</a></dd>
- </dl>
- <ol class="popup_content">
- <li><a href="http://www.5jiuai.com/?p=1182" target="_blank">js:input只能输入数字字符,并且规定输入值的大小</a></li>
- <li><a href="http://www.5jiuai.com/?p=1122" target="_blank">php正则分析URL字符串</a></li>
- <li><a href="http://www.5jiuai.com/?p=964" target="_blank">将赋值形式字符串转换为变量</a></li>
- <li><a href="http://www.5jiuai.com/?p=960" target="_blank">按一维数组元素个数平均拆分数组,拆分优先满足前面的数组</a></li>
- <li><a href="http://www.5jiuai.com/?p=955" target="_blank">建立url或者路径path的文件夹</a></li>
- <li><a href="http://www.5jiuai.com/?p=946" target="_blank">显示默认图片,图片信息以及滚动显示图片</a></li>
- <li><a href="http://www.5jiuai.com/?p=834" target="_blank">利用Jquery插件实现jqzoom图片放大效果</a></li>
- <li><a href="http://www.5jiuai.com/?p=736" target="_blank">通过js获取浏览器宽高的两种方法</a></li>
- <li><a href="http://www.5jiuai.com/?p=497" target="_blank">在win中使用mail()发邮件(sendmail配置)</a></li>
- <li><a href="http://www.5jiuai.com/?p=338" target="_blank">php-mysql操作类(支持Mysql5以上版本,不需要自己写SQL语句)</a></li>
- </ol>
- <script language="javascript">
- <!--
- $(window).scroll(function (){
- windowScrollUpload(this);
- });
- function windowScrollUpload(obj){
- $('#popup > div').eq(0).css({
- 'top': $(obj).scrollTop()+'px'
- });
- $('#popup > div').eq(1).css({
- 'top':($(obj).scrollTop()<200 ? 200 : $(obj).scrollTop())+'px'
- });
- }
- //-->
- </script>
- </div>
- </div>
- <!-- 主要部分 -->
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/230720134756.html
来源: http://www.codesnippet.cn/detail/230720134756.html