点击链接后,弹出另一个浮动窗口,全屏变暗遮罩效果,适用于下载站

逃离我推掉我的手 2021-09-26 01:26 154阅读 0赞

效果图

![Center][]

首先,要引入jquery及jquery.imagePreview.1.0.js插件

jquery.js 自己下载

而jquery.imagePreview.1.0.js插件内容为

// JavaScript Document
    //copyright c by zhangxinxu 2009-10-17 
    //http://www.zhangxinxu.com
    /*由于大图绑定在href属性中，故一般而言，需使用a标签的href指向大图。仅支持png,gif,jpg,bmp四种格式的图片。用法是：目标.preview();
    例如：<a href="xx.jpg">图片</a>
    $("a").preview();就可以了
    */
    (function($){
    	$.fn.preview = function(){
    		var xOffset = 10;
    		var yOffset = 20;
    		var w = $(window).width();
    		$(this).each(function(){
    			$(this).hover(function(e){
    				if(/.png$|.gif$|.jpg$|.bmp$/.test($(this).attr("data"))){
    					//$("body").append("<div id='preview'><div><img src='"+$(this).attr('data')+"' /><p>"+$(this).attr('title')+"</p></div></div>");
    					$("body").append("<div id='preview'><div><img height='455' width='277' src='"+$(this).attr('data')+"' /></div></div>");
    				}else{
    					$("body").append("<div id='preview'><div><p>"+$(this).attr('title')+"</p></div></div>");
    				}
    				$("#preview").css({
    					position:"absolute",
    					padding:"4px",
    					border:"1px solid #f3f3f3",
    					backgroundColor:"#eeeeee",
    					top:(e.pageY - yOffset) + "px",
    					zIndex:1000
    				});
    				$("#preview > div").css({
    					padding:"5px",
    					backgroundColor:"white",
    					border:"1px solid #cccccc"
    				});
    				$("#preview > div > p").css({
    					textAlign:"center",
    					fontSize:"12px",
    					padding:"8px 0 3px",
    					margin:"0"
    				});
    				if(e.pageX < w/2){
    					$("#preview").css({
    						left: e.pageX + xOffset + "px",
    						right: "auto"
    					}).fadeIn("fast");
    				}else{
    					$("#preview").css("right",(w - e.pageX + yOffset) + "px").css("left", "auto").fadeIn("fast");	
    				}
    			},function(){
    				$("#preview").remove();
    			}).mousemove(function(e){
    				$("#preview").css("top",(e.pageY - xOffset) + "px")
    				if(e.pageX < w/2){
    					$("#preview").css("left",(e.pageX + yOffset) + "px").css("right","auto");
    				}else{
    					$("#preview").css("right",(w - e.pageX + yOffset) + "px").css("left","auto");
    				}
    			});						  
    		});
    	};
    })(jQuery);

然后,模板内容为

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>安卓</title>
    <script language="javascript" type="text/javascript" src="jquery.js" ></script>
    <script language="javascript" type="text/javascript" src="jquery.imagePreview.1.0.js" ></script>
    <script language="javascript" type="text/javascript">
    $(function(){
    	$("a.preview").preview();	  
                $('.aaa').click(function () {
                    $(".boxout").css({"display":"block"});
    				event.stopPropagation(); //停止事件冒泡
    $(".bgbox").toggle();		  
    //$('body,html').animate({scrollTop:0},550);
    });		
      $(".closes").click(function(event){
        event.stopPropagation(); //停止事件冒泡
       $(".bgbox").toggle();
       $(".boxout").css({"display":"none"});
     });
     //点击空白处隐藏弹出层
       //$("body").click(function(event){
        // var _con = $('.boxout');  // 设置目标区域
        // if(!_con.is(event.target) && _con.has(event.target).length ==0){ 
         // _con.hide();     //淡出消失
    	 // $(".bgbox").toggle();
        // }
      //});
     
     });
     
    
    
    </script>
    </head>
    <body>
    <div class="bgbox"></div>
    <span class="html-tag" style="font-family: monospace;font-size:14px; white-space: pre-wrap;"><a <span class="html-attribute-name">class</span>="<span class="html-attribute-value">aaa</span>"<span class="html-attribute-name">href</span>="<a target=_blank class="html-attribute-value html-external-link" target="_blank">javascript:void(0);</a>" <span class="html-attribute-name">onclick</span>="<span class="html-attribute-value">window.open('/download/23199_4298.html')</span>" <span class="html-attribute-name">style</span>="<span class="html-attribute-value">color:#FFF;</span>"></span><span style="font-family: monospace;font-size:14px; white-space: pre-wrap;">本地下载</span><span class="html-tag" style="font-family: monospace;font-size:14px; white-space: pre-wrap;"></a></span>其它页面内容
    <style type="text/css">
    
    .bgbox{background: #fff; display: none;position: absolute;position: fixed; top: 0; right: 0; left: 0; bottom: 0px; background: rgba(0,0,0,.3); z-index: 10; }
    html {
    	margin:0;
    	padding:0;
    	border:0;
    	-webkit-text-size-adjust:100%;
    	-ms-text-size-adjust:100%;
    	-webkit-tap-highlight-color:rgba(0,0,0,0)
    }
    body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,q,dl,dt,dd,ol,ul,li,fieldset,form,legend,caption,tbody,tfoot,thead,article,aside,dialog,figure,footer,header,hgroup,nav,section {list-style:none;
    	margin:0;
    	padding:0;
    	border:0;
    	font-size:14px;
    	font:inherit;
    	vertical-align:baseline
    }
    article,aside,details,figcaption,figure,dialog,footer,header,hgroup,menu,nav,section {
    	display:block
    }
    body {
    	font-size:14px;
    	color:#333;
    	background:#fff;
    	font-family:"Microsoft YaHei","simsun","Helvetica Neue",Arial,Helvetica,sans-serif
    }
    img {
    	border:0;
    	vertical-align:bottom
    }
    ::-webkit-input-placeholder {
    	color:#999
    }
    .boxout{
    	background:#fff;
    	z-index: 111;display:none;
    	box-shadow: 0 1px 4px #AAA;
    position: fixed; _position:absolute; /* hack for IE6 */
    
    top: 50%;
    left: 50%; 
    margin: -201px 0 0 -480px; /* 注意,201表示高度的一半,480也是按自己需要自己调整*/
    width:960px;
    height:400px;
    padding:15px;
    height:400px
    }
    
    .box_in1{z-index: 111;;display:inline-block }
    .box_in1 li{width:180px;height:48px;display:inline-block;float:left;
    margin:12px;margin-left:0}
    .box_in1 li img {
        float: left;
        width: 48px;
        height: 48px;
        margin-right: 10px;
    }
    .box_in1 li p a {
        display: block;
        height: 24px;
        line-height: 24px;
        overflow: hidden;
        font-size: 14px;
        color: #333;
    }
    .box_in1 li  p em{
        display: block;
        heihgt: 20px;
        line-height: 20px;
        overflow: hidden;    
    }
    .box_in1 li  p em s {
        margin: 0 3px;font-style: normal;
    }
    .box_in2  {
        z-index: 11;
    }
    
    .box_in2 li {
        width:78px;height:82px;text-align:center;margin-top:20px;display: inline-block;
    }
    .box_in2 li p a{
       font-size:12px
    }
    hr {
    	background:#ddd;
    	color:#ddd;
    	clear:both;
    	float:none;
    	width:100%;
    	height:1px;
    	margin:2px 0;
    	border:0;
    	-moz-box-sizing:content-box;
    	box-sizing:content-box
    }
    hr.space {
    	background:#fff;
    	color:#fff;
    	visibility:hidden
    }
    </style>
    <div class="boxout">
    <h1 style="color:#15d292;font-size:24px;">其中一个<span  style="color:#111">正在下载,用户还下载了</span><span class="closes"style="position:absolute;right:10px;top:10px;background:#8f8f8f;font-size:14px;color:#fff;padding:4px">关闭</span></h1>
    <br/>
    <h2 style="color:##15d292;font-size:18px">软件分类
    <a href=""><span style="float:right;font-size:14px;font-weight:bold;color:red;">更多(25)>></span></a></h2>
    
    <div class="box_in1">
    <li>
    <a class="preview"href="http://"data="http://pic.pc6.com/up/2016-1/2016117211947.jpg"><img src="360.jpg" alt="" /></a>
    <p><a >360安全1浏览器</a></p>
    <em>42.3M / 简体 / 7.8</em>
    </li>
    <li>
    <img src="360.jpg" alt="" />
    <p>360安全浏览器</p>
    <em>42.3M / 简体 / 7.8</em>
    </li>
    <li>
    <img src="360.jpg" alt="" />
    <p>360安全浏览器</p>
    <em>42.3M / 简体 / 7.8</em>
    </li>
    <li>
    <img src="360.jpg" alt="" />
    <p>360安全浏览器</p>
    <em>42.3M / 简体 / 7.8</em>
    </li>
    <li>
    <img src="360.jpg" alt="" />
    <p>360安全浏览器</p>
    <em>42.3M / 简体 / 7.8</em>
    </li>
    <li>
    <img src="360.jpg" alt="" />
    <p>360安全浏览器</p>
    <em>42.3M / 简体 / 7.8</em>
    </li>
    </div>
    
    <hr />
    
    <div class="box_in2">
    <li><a href=""><img src="360.jpg" alt="" /></a>
    <p><a href="">360安全浏览器</a></p>
    </li><li><a href=""><img src="360.jpg" alt="" /></a>
    <p><a href="">360安全浏览器</a></p>
    </li><li><a href=""><img src="360.jpg" alt="" /></a>
    <p><a href="">360安全浏览器</a></p>
    </li><li><a href=""><img src="360.jpg" alt="" /></a>
    <p><a href="">360安全浏览器</a></p>
    </li><li><a href=""><img src="360.jpg" alt="" /></a>
    <p><a href="">360安全浏览器</a></p>
    </li><li><a href=""><img src="360.jpg" alt="" /></a>
    <p><a href="">360安全浏览器</a></p>
    </li><li><a href=""><img src="360.jpg" alt="" /></a>
    <p><a href="">360安全浏览器</a></p>
    </li><li><a href=""><img src="360.jpg" alt="" /></a>
    <p><a href="">360安全浏览器</a></p>
    </li><li><a href=""><img src="360.jpg" alt="" /></a>
    <p><a href="">360安全浏览器</a></p>
    </li><li><a href=""><img src="360.jpg" alt="" /></a>
    <p><a href="">360安全浏览器</a></p>
    </li><li><a href=""><img src="360.jpg" alt="" /></a>
    <p><a href="">360安全浏览器</a></p>
    </li><li><a href=""><img src="360.jpg" alt="" /></a>
    <p><a href="">360安全浏览器</a></p>
    </li>
    </div>
    </div>
    
    
    
    
    
    
    
    </body></html>

![70][]

[Center]: /images/20210923/fb9d5c1c3cad4b64b25dc9c96e1a763f.png
[70]: /images/20210923/c4c74bdecc4046da9ac818135d662e2e.png