简介:
一个纯CSS打造、兼容各个浏览器的网页泡泡组件
使用说明:
1.该泡泡组件支持的浏览器有IE6+,Chrome,Firefox, Safari, 360等。
2.标题和尾巴可以根据需要自由去留
3.IE6浏览器,三角不能空心(因为不支持透明边框的CSS)
4.IE6,IE7浏览器不支持圆角(因为border-radius属性不支持)
5.泡泡高度支持自适应
6.当需要设置泡泡的最小高度时,IE6中要通过修改panel-content的高度来实现
7.当需要修改皮肤时,请用附加样式的方式实现,最好不要在组件的CSS中直接修改。
8.修改颜色时,注意三角的样式要同步修改。
9.组件自带的zuipop前缀,可以防止CSS冲突
10.如果去掉头或尾后发现圆角被覆盖的情况,请给zuipop-panel-content附加上圆角的样式。
(这种情况一般出现在去掉头尾,然后给zuipop-panel-content加上背景色的时候发生)
附例:
一个完整的泡泡使用示例:pop.html
<div class="zuipop-container">
<div class="zuipopgroup">
<div class="zuipop">
<div class="zuipop-panel">
<div class="zuipop-panel-heading"><p>标题</p></div>
<div class="zuipop-panel-content">这是泡泡内容<br /><h1>我可以无限增高的哦!!</h1>
<h2>我可以无限增高的哦!!</h2>
<h3>我可以无限增高的哦!!</h3>
<h4>我可以无限增高的哦!!</h4></div>
<div class="zuipop-panel-footering"><p>尾巴</p></div>
</div>
<div class="zuipop-arrowleft"></div>
<div class="zuipop-arrowleft zuipop-arrowleft-hacker"></div>
</div>
</div>
</div>
修改皮肤颜色:skinsample.html
<style>
.blueborder{
border-color:blue !important;
}
.blueborder-leftarrow{
border-right-color:blue !important; /* 三角边框的颜色 */
top:50px !important;
}
.blueborder-leftarrow::after{
border-right-color:white !important; /* 三角空心里的颜色 */
}
.blueheader{
background:blue !important;
color:white;
}
</style>
<div class="zuipop-container">
<div class="zuipopgroup">
<div class="zuipop">
<div class="zuipop-panel blueborder">
<div class="zuipop-panel-heading blueheader"><p>标题</p></div>
<div class="zuipop-panel-content">这是泡泡内容<br />
<h1>我可以无限增高的哦!!</h1>
<h2>我可以无限增高的哦!!</h2>
<h3>我可以无限增高的哦!!</h3>
<h4>我可以无限增高的哦!!</h4>
</div>
<div class="zuipop-panel-footering"><p>尾巴</p></div>
</div>
<div class="zuipop-arrowleft blueborder-leftarrow"></div>
<div class="zuipop-arrowleft zuipop-arrowleft-hacker"></div>
</div>
</div>
</div>