方法一,自定弹出层
弹出层，我们常用到，这里分享一个别人的弹出层插件，页面滚动，弹出层用于居中于窗口中间位置。
假如HTML代码如下
| 代码如下 | 复制代码 |
| <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>弹出层</title> </head> <body> <div class="btns">我点</div> <div id="screen"></div> <div class="popBox"> <em>关闭</em> 这里是你想要显示的内容，略过...... </div> </body> </html> |
|
主要一共2层，外面的screen是页面遮罩层，用于遮住原来页面的内容，可用可不用。
下面定义一下css。
| 代码如下 | 复制代码 |
| *{ margin:0; padding:0; } #screen{ width:100%; height:100%; position:absolute; top:0; left:0; display:none; z-index:9998; background:#666; opacity:0.5; filter:alpha(opacity=50); -moz-opacity:0.5; } .popBox{ width:600px; background:#fff; border:2px #8FA4F5 solid; padding:1px; position:absolute; top:0; left:0; display:none; z-index:9999; } .popBox em{ padding:2px 5px; position:absolute; right:10px; top:10px; background:#333; color:#fff; } |
|
最后就是js了，这是居于jQuery框架下的插件，所以，记得引入jquery库文件。
| 代码如下 | 复制代码 |
| <script type="text/javascript"> //使用。 $(function(){ $('.popBox em').click(function(){ $('.popBox').fadeOut(function(){ $('#screen').hide(); }); return false; }); $('.btns').click(function(){ var h = $(document).height(); $('#screen').css({ 'height': h }); $('#screen').show(); $('.popBox').center(); $('.popBox').fadeIn(); return false; }); }); //下面是居中的插件。 jQuery.fn.center = function(loaded) { var obj = this; body_width = parseInt($(window).width()); body_height = parseInt($(window).height()); block_width = parseInt(obj.width()); block_height = parseInt(obj.height()); left_position = parseInt((body_width/2) - (block_width/2) + $(window).scrollLeft()); if (body_width<block_width) { left_position = 0 + $(window).scrollLeft(); }; top_position = parseInt((body_height/2) - (block_height/2) + $(window).scrollTop()); if (body_height<block_height) { top_position = 0 + $(window).scrollTop(); }; if(!loaded) { obj.css({'position': 'absolute'}); obj.css({ 'top': top_position, 'left': left_position }); $(window).bind('resize', function() { obj.center(!loaded); }); $(window).bind('scroll', function() { obj.center(!loaded); }); } else { obj.stop(); obj.css({'position': 'absolute'}); obj.animate({ 'top': top_position }, 200, 'linear'); } } </script> |
|
方法二，直接用用JQuery插件TipsWindown 1.1，比上面方法更简单
2.弹出页面中的某个ID的html：
| 代码如下 | 复制代码 |
| tipsWindown("标题","id:testID","300","200","true","","true","id") | |
我是测试ID里的内容
我换行了...
3.弹出图片：
| 代码如下 | 复制代码 |
| tipsWindown("图片","img:图片路径","250","150","true","","true","img") | |
4.get加载一个.html文件（也可以是.php/.asp?id=4之类的）：
| 代码如下 | 复制代码 |
| tipsWindown("标题","url:get?test.html","250","150","true","","true","text"); | |
5.加载一个页面到框架显示：
| 代码如下 | 复制代码 |
|
tipsWindown("标题","iframe:http://www.111cn.net.net","900","580","true","","true","leotheme"); |
|
6.弹出一个不能拖动且没有遮罩背景的文本信息层：
| 代码如下 | 复制代码 |
| tipsWindown("提示","text:提示信息内容","250","150","false","","false","msg") | |
7.弹出一个不能拖动，三秒钟自动关闭的层：
| 代码如下 | 复制代码 |
|
tipsWindown("提示","text:提示信息内容","250","150","false","3000","true","msg") |
|
时间： 2024-09-13 21:43:31