多个触发元素公用一个弹出框
Source
Output
QRCode
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>多个触发元素公用一个弹出框</title>
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/kissy/k/5.0.1/css/base.css">
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/kissy/k/5.0.1/button/assets/dpl.css">
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/kissy/k/5.0.1/overlay/assets/dpl.css">
<style type="text/css">
ul {
padding: 0;
margin: 0;
}
.shop-rank {
width: 300px;
font-size: 12px;
}
.shop-rank li {
border-bottom: 1px dashed #EEEEEE;
height: 42px;
overflow: hidden;
padding: 9px 0;
}
.shop-rank .pic {
border: 1px solid #CCCCCC;
float: left;
height: 40px;
margin-right: 10px;
text-align: center;
width: 40px;
}
.shop-rank .pic a {
display: table-cell;
height: 40px;
text-align: center;
vertical-align: middle;
width: 40px;
}
.shop-rank .pic img {
vertical-align: middle;
}
.shop-rank .desc, .shop-rank .price {
float: left;
height: 14px;
line-height: 1.2;
overflow: hidden;
text-align: left;
width: 120px;
}
.shop-rank .collecter, .shop-rank .sale {
float: left;
line-height: 1.4;
overflow: hidden;
width: 120px;
}
#popup3 {
background: white;
}
</style>
<script src="//g.alicdn.com/kissy/k/5.0.1/seed-debug.js" data-config="{combine:true}"></script>
</head>
<body>
<div class="container">
<h1>多个触发元素公用一个弹出框</h1>
<p>鼠标悬停在小图片上面出现的大图片是共用的一个弹出框，监听mouseenter事件并通过设置 align 属性来动态更新弹出框的定位信息。</p>
<div class="shop-rank" id="multi">
<ul>
<li>
<div class="pic">
<a target="_blank" href="http://item.taobao.com/item.htm?id=3231736190"><img src="http://img03.taobaocdn.com/bao/uploaded/i7/T1ftRxXnRvXXalxZ.T_010955.jpg_40x40.jpg" bigpicurl="http://img03.taobaocdn.com/bao/uploaded/i7/T1ftRxXnRvXXalxZ.T_010955.jpg_120x120.jpg"></a>
</div>
<div class="desc">
<a target="_blank" title="他她Tata 正品人气奢华皮草风牛皮女及踝靴FTJ23D火爆款" href="http://item.taobao.com/item.htm?id=3231736190">他她Tata 正品人气奢华皮草风牛皮女及踝靴FTJ23D火爆款</a>
</div>
<div class="price">
<i></i>298.00元 i7/T1ftRxXnRvXXalxZ.T_010955.jpg
</div>
<div class="sale">
<i></i>已售出 <strong>3799</strong> 笔
</div>
</li>
<li>
<div class="pic">
<a target="_blank" href="http://item.taobao.com/item.htm?id=9543317408"><img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1n_p9Xm4jXXcYEmEY_030526.jpg_40x40.jpg" bigpicurl="http://img01.taobaocdn.com/bao/uploaded/i1/T1n_p9Xm4jXXcYEmEY_030526.jpg_120x120.jpg"></a>
</div>
<div class="desc">
<a target="_blank" title="百丽belle 正品2011春季 高跟 粉色黑色漆牛皮女单鞋 3PQ04D" href="http://item.taobao.com/item.htm?id=9543317408">百丽belle 正品2011春季 高跟 粉色黑色漆牛皮女单鞋 3PQ04D</a>
</div>
<div class="price">
<i></i>458.00元 i1/T1n_p9Xm4jXXcYEmEY_030526.jpg
</div>
<div class="sale">
<i></i>已售出 <strong>1815</strong> 笔
</div>
</li>
<li>
<div class="pic">
<a target="_blank" href="http://item.taobao.com/item.htm?id=9138154640"><img src="http://img03.taobaocdn.com/bao/uploaded/i7/T1aJXZXfFsXXbGzYHb_092930.jpg_40x40.jpg" bigpicurl="http://img03.taobaocdn.com/bao/uploaded/i7/T1aJXZXfFsXXbGzYHb_092930.jpg_120x120.jpg"></a>
</div>
<div class="desc">
<a target="_blank" title="商城母亲节包邮 百丽正品女鞋 belle 2011牛皮中跟 女单鞋 113-15" href="http://item.taobao.com/item.htm?id=9138154640">商城母亲节包邮 百丽正品女鞋 belle 2011牛皮中跟 女单鞋 113-15</a>
</div>
<div class="price">
<i></i>358.00元 i7/T1aJXZXfFsXXbGzYHb_092930.jpg
</div>
<div class="sale">
<i></i>已售出 <strong>1587</strong> 笔
</div>
</li>
<li>
<div class="pic">
<a target="_blank" href="http://item.taobao.com/item.htm?id=9172959292"><img src="http://img04.taobaocdn.com/bao/uploaded/i4/T1Iy0ZXnBhXXbWYAQ2_044742.jpg_40x40.jpg" bigpicurl="http://img04.taobaocdn.com/bao/uploaded/i4/T1Iy0ZXnBhXXbWYAQ2_044742.jpg_120x120.jpg"></a>
</div>
<div class="desc">
<a target="_blank" title="他她tata 2011春季超高跟防水台女单鞋 J53-8D" href="http://item.taobao.com/item.htm?id=9172959292">他她tata 2011春季超高跟防水台女单鞋 J53-8D</a>
</div>
<div class="price">
<i></i>398.00元 i4/T1Iy0ZXnBhXXbWYAQ2_044742.jpg
</div>
<div class="sale">
<i></i>已售出 <strong>1583</strong> 笔
</div>
</li>
<li>
<div class="pic">
<a target="_blank" href="http://item.taobao.com/item.htm?id=5057404618"><img src="http://img04.taobaocdn.com/bao/uploaded/i8/T1wSFAXoxdXXbtWvsU_014508.jpg_40x40.jpg" bigpicurl="http://img04.taobaocdn.com/bao/uploaded/i8/T1wSFAXoxdXXbtWvsU_014508.jpg_120x120.jpg"></a>
</div>
<div class="desc">
<a target="_blank" title="百丽belle正品 夏季新款 坡跟绵羊皮镶钻女凉鞋 3LC04D" href="http://item.taobao.com/item.htm?id=5057404618">百丽belle正品 夏季新款 坡跟绵羊皮镶钻女凉鞋 3LC04D</a>
</div>
<div class="price">
<i></i>298.00元 i8/T1wSFAXoxdXXbtWvsU_014508.jpg
</div>
<div class="sale">
<i></i>已售出 <strong>1547</strong> 笔
</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
require(['node', 'overlay'], function ($, Overlay) {
//新建共享popup层
var popup = new Overlay.Popup({
elStyle:{
border:"2px solid gray",
lineHeight:0
},
width:120, //配置高和宽
height:120,
effect:{
effect:"fade", //popup层显示动画效果，slide是展开，也可以"fade"渐变
duration:0.2
}
});
// 注意：使用定制的显示/隐藏方式
$("#multi").delegate("mouseenter", "img", function (e) {
var target = $(e.target);
popup.set("content", '<img src="' + target.attr('bigpicurl') + '"/>');
popup.set('align', {
node:target,
points:["tr", "tl"]
});
popup.show();
});
$("#multi").delegate("mouseleave", "img", function (e) {
popup.hide();
});
});
</script>
</body>
</html>