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

最新推荐文章于 2020-04-25 16:43:47 发布
最新推荐文章于 2020-04-25 16:43:47 发布
阅读量2.8k 收藏 2
点赞数
分类专栏： css及js相关
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/viqecel/article/details/52902776
版权

效果图

 

 

首先,要引入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>

 

 

 

 

viqecel
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浮动窗口和点击事件
02-08
简单的实现浮动窗口,以服务的形式去实现,还有进行了事件的简单的再次分发
html点击按钮弹出悬浮窗_9种实现点击一个链接弹出一个小窗口的代码
weixin_39760650的博客
12-20 5676
9种实现点击一个链接弹出一个小窗口的代码因为着是一段javascripts代码，所以它们应该放在之间。是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。window.open('page.html')用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(.....
点击按钮Alert弹出遮罩层效果的提示框代码
nanjing0412的专栏
03-09 1734
点击按钮Alert弹出遮罩层效果的提示框代码，改善优化的Alert弹出提示效果，类似于新浪邮箱的提示效果。比较独立。在wenming版主的帮助下，已解决了高度不能适应的BUG。使用方法很简单，在需要弹出提示的页面调用即可，示例中有方法。 经过改善优化的Alert弹出提示效果 *{ margin:0;padding:0; } 测试测试 测试测试测试
6种浮动提示框，弹出窗口，JS代码
10-22
总共有6种浮动提示框，鼠标移动图片或者文字上，会有浮动的提示窗口跟随，跟随鼠标移动，图片部分区域提示等都有
jQuery点击图片弹出大图遮罩层
u011927449的博客
04-25 493
使用jQuery插件HoverTreeShow弹出遮罩层显示大图效果体验：http://hovertree.com/texiao/hovertreeshow/在 开发HoverTreeTop项目的产品展示功能过程中，因为要把产品图片的大图显示给用户看，就使用jQuery制作了一个插 件：HoverTreeShow ，使用该插件可以很方便的弹出图片的大图，已经运用在项...
jQuery实现点击弹出背景变暗遮罩效果实例代码
10-22
jQuery 实现点击弹出背景变暗遮罩效果是一种常见的网页交互设计，用于创建弹窗、提示框或选择菜单等元素时提供更好的用户体验。这个实例主要涉及了 jQuery 的事件处理、DOM 操作以及 CSS 样式设计，使得在用户点击...
jQuery实现弹出带遮罩层的居中浮动窗口效果
10-21
以上内容即是对“jQuery实现弹出带遮罩层的居中浮动窗口效果”这一技术细节的详细介绍。通过本案例，我们可以看到jQuery在操作DOM、实现交云效果以及优化用户体验方面的强大能力。这些技术的应用不仅限于简单的示例...
点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码
09-04
在网页设计中，点击弹出层效果和弹出窗口后网页背景变暗是常见的交互设计手法，用于增强用户体验，提供更加聚焦的操作环境。这两种效果通常应用于弹窗对话框、模态框或者信息提示等场景。以下是对实现这些效果的代码...
jQuery实现的点击链接后弹出窗口背景阴暗遮罩效果源码.zip
11-07
本资源"jQuery实现的点击链接后弹出窗口背景阴暗遮罩效果源码.zip"提供了利用jQuery实现点击链接后弹出窗口并伴随背景阴暗遮罩效果的具体代码实现。这个功能在网页设计中非常常见，例如用于模态对话框、弹窗提示或...
点击链接弹出小窗口
07-10
点击链接弹出小窗口
jQuery 弹出层 浮动遮罩层 提示框 并随页面滚动而滚动
04-18
jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难，只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如：我想要这里是弹出浮动遮罩层 并随页面滚动而滚动 只要调用 $('#ok').showModel();这个方法就可以了 调用$('#ok').closeModel();就可以关闭层了 这个插件还有个好处是自动隐藏select控件，关闭后自动显示select控件 弹出层并随页面滚动而滚动
弹出居中的div层
yflxc的专栏
11-11 2257
点击文字弹出一个DIV层窗口代码                    .black_overlay{              display: none;              position: absolute;              top: 0%;              left: 0%;              width: 100%;         
弹出div层，简易，周围变灰
一七得七
11-18 2877
原链接：http://blog.csdn.net/kouwoo/article/details/43149213 点击之后，原页面变灰，并弹出一个div层显示bulabula内容 变灰的实现：加一个jQuery 遮罩    具体代码： 弹出DIV body { font-family: Aria
JS弹窗操作，点击遮罩层关闭弹窗
lsx19981201的博客
03-07 4957
&lt;!-- 打开弹窗按钮 --&gt; &lt;button id="myBtn"&gt;打开弹窗&lt;/button&gt; &lt;!-- 弹窗 --&gt; &lt;div id="myModal" class="modal"&gt; &lt;!-- 弹窗内容 --&gt; &lt;div class="moda
JavaScript弹出窗口DIV层效果代码
my_dif的专栏
07-21 595
创建一个弹出DIV窗口可能是现在网站/网页制作中最常碰到的问题之一。传统的JavaScript弹窗已经不适合目前网站的设计理念了，理由有二：首先，不友好——生硬的弹出对话框且伴随着“哐”的一声对用户体验是个很大的挑战；其次，兼容性不够强——有相当多的浏览器屏蔽了这种JS的Alert()方法。于是，一个良好用户体验的网站需要一种更合理的解决方案——使用很少的HTML代码，很少的CSS代码和几行的Ja...
页面全屏遮罩的实现 方式
rainbow702的博客
07-17 1367
之前做了一个页面，在点击了某个按钮之后，要求页面出现一个全屏遮罩，一开始使用了position:absolute来实现的。当时因为画面大小是固定的，不可以resize的，所以，没有发现问题。 最近用了同样的做法做了一个遮罩，但是画面是可以进行resize的，所以就发现了一个问题，当画面被reisze到浏览器出现了滚动条的时候，就发现，用absolute 的做法是有问题的。后来改成fixed定位...
thinkcmf 在新窗口打开链接方法
10年老码农
12-03 1366
详情 今天在用THNIKCMF 的时候，想做一个新在新窗口打开链接方法，试了一下，是这个。现分享给大家。
jquery 给input text元素赋值,js修改表单的值
热门推荐
09-05 6万+
&lt;script&gt; function changestatus(money){ //$("#money").val(money);//val()这种写法有时会失效,特别是他的父元素是dosplay:none时 $("#money").attr("value",money);//推荐这种写法,可正常赋值 //document.getElementById("money").val...
vue2点击后弹出页面，背景变暗
最新发布
05-23
这个效果可以通过 Vue.js 结合 CSS ...你可以在点击事件中添加一个类，使背景颜色变暗，并弹出一个新的页面或模态框。 首先，你可以在 HTML 中添加一个遮罩层，用来遮挡整个页面，并设置其初始状态为隐藏： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值