JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://static.extrabux.com/css/min/extrabux.min.12669.gz.css">
<div id="promptToAddPurchase">
<div style="display: block;" class="bubble" data-id="1">
<div class="imgWrapper">
<img alt="购物车" src="//static.extrabux.com/images/icons/shopping_cart.png">
</div>
<div class="text">
<div>
您有在<span class="storeName">Puritan's Pride</span>购买过什么产品?</div>
<div>
<a class="addPurchaseLink" href="/users/add-purchase?store=puritans-pride&date=2012-11-01">
追加一个订单 </a>
<span class="cash">(<span class="cashBackDisplay">12%</span> cash back)</span>
</div>
</div>
<a class="closeBubble" href="#close">
x
</a>
</div>
</div>
SCSS
#promptToAddPurchase{
font-size: 14px;
position: fixed;
bottom: 10px;
left: 10px;
.bubble{
display: none;
position: relative;/*this is so the Close button positions correctly*/
padding: 10px;
line-height: 19px;
.imgWrapper{
display: inline-block;
vertical-align: middle;
position: relative;
top: -3px;
}
img{
width: 20px;
height: 19px;
}
.text{
display: inline-block;
vertical-align: middle;
margin-left: 6px;
margin-right: 10px;
}
.storeName{
font-weight: bold;
}
.cash{
font-size: 11px;
}
a{
&.addPurchaseLink{
font-weight: bold;
}
&.closeBubble{
margin-top: -7px;
display: inline-block;
vertical-align: top;
font-size: 11px;
padding: 6px;
position: absolute;
right: 0;
top: 0;
}
}
}
}
JavaScript
$('body').click(function(){
//$('.bubble').hide();
$('.bubble').effect('bounce');
});