一个纯CSS打造、兼容各个浏览器的网页泡泡组件
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
screenshots
README.md
pop.html
readme.txt
skinsample.html

README.md

zuipop 1.0 2014/12/08

简介:
一个纯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>

效果图

image

官方主页

http://www.cnzui.com/