Hello sau nhiều ngày vắng bóng mình đã quay trở lại và mình có dạo trên codepen thì có thấy một widget rất đẹp muốn share cho mọi người!!!!
CÁCH THỰC HIỆN
Bước 1: Ta chèn đoạn code phía dưới vào trước thẻ
]]></b:skin>nhé.toast__container {Bước 2: Ta chèn code bên dưới vào trước thẻ
display: table-cell;
vertical-align: middle;
}
.toast__cell{
display:inline-block;
}
.add-margin{
margin-top:20px;
}
.toast__svg{
fill:#fff;
}
.toast {
text-align:left;
padding: 21px 0;
background-color:#fff;
border-radius:4px;
max-width: 500px;
top: 0px;
position:relative;
box-shadow: 1px7px 14px -5pxrgba(0,0,0,0.2);
}
.toast:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
border-top-left-radius:4px;
border-bottom-left-radius: 4px;
}
.toast__icon{
position:absolute;
top:50%;
left:22px;
transform:translateY(-50%);
width:14px;
height:14px;
padding: 7px;
border-radius:50%;
display:inline-block;
}
.toast__type {
color: #3e3e3e;
font-weight: 700;
margin-top: 0;
margin-bottom: 8px;
}
.toast__message {
font-size: 14px;
margin-top: 0;
margin-bottom: 0;
color: #878787;
}
.toast__content{
padding-left:70px;
padding-right:60px;
}
.toast__close {
position: absolute;
right: 22px;
top: 50%;
width: 14px;
cursor:pointer;
height: 14px;
fill:#878787;
transform: translateY(-50%);
}
.toast--green.toast__icon{
background-color:#2BDE3F;
}
.toast--green:before{
background-color:#2BDE3F;
}
.toast--blue.toast__icon{
background-color:#1D72F3;
}
.toast--blue:before{
background-color:#1D72F3;
}
.toast--yellow.toast__icon{
background-color:#FFC007;
}
.toast--yellow:before{
background-color:#FFC007;
}
</body> nhé<scripttype="text/javascript">Bước 3: Ta thêm code bên dưới vào chỗ bạn muốn hiển thị là được.
jQuery(document).ready(function(){
jQuery('.toast__close').click(function(e){
e.preventDefault();
var parent = $(this).parent('.toast');
parent.fadeOut("slow", function() { $(this).remove(); } );
});
});
</script>
<div class="toast__container">
<divclass="toast__cell">
<div class="toast toast--green">
<divclass="toast__icon">
<svgclass="toast__svg"style="enable-background: new 0 0 512 512;"version="1.1"viewbox="0 0 512 512"x="0px"xml:space="preserve"xmlns:xlink="http://www.w3.org/1999/xlink"xmlns="http://www.w3.org/2000/svg" y="0px">
<g><g><pathd="M504.502,75.496c-9.997-9.998-26.205-9.998-36.204,0L161.594,382.203L43.702,264.311c-9.997-9.998-26.205-9.997-36.204,0 c-9.998,9.997-9.998,26.205,0,36.203l135.994,135.992c9.994,9.997,26.214,9.99,36.204,0L504.502,111.7 C514.5,101.703,514.499,85.494,504.502,75.496z"></path>
</g></g>
</svg>
</div>
<divclass="toast__content">
<divclass="toast__type">
Demo</div>
<divclass="toast__message">
Thêm Vài dòng mô tả của bạn ở đây.</div>
</div>
<divclass="toast__close">
<svg enable-background="new 0 0 15.642 15.642"version="1.1"viewbox="0 0 15.642 15.642"xmlns:xlink="http://www.w3.org/1999/xlink"xmlns="http://www.w3.org/2000/svg">
<pathd="M8.882,7.821l6.541-6.541c0.293-0.293,0.293-0.768,0-1.061 c-0.293-0.293-0.768-0.293-1.061,0L7.821,6.76L1.28,0.22c-0.293-0.293-0.768-0.293-1.061,0c-0.293,0.293-0.293,0.768,0,1.061 l6.541,6.541L0.22,14.362c-0.293,0.293-0.293,0.768,0,1.061c0.147,0.146,0.338,0.22,0.53,0.22s0.384-0.073,0.53-0.22l6.541-6.541 l6.541,6.541c0.147,0.146,0.338,0.22,0.53,0.22c0.192,0,0.384-0.073,0.53-0.22c0.293-0.293,0.293-0.768,0-1.061L8.882,7.821z"fill-rule="evenodd"></path>
</svg>
</div>
</div>
<div class="toast toast--blue add-margin">
<divclass="toast__icon">
<svgclass="toast__svg"style="enable-background: new 0 0 32 32;" version="1.1"viewbox="0 0 32 32"x="0px"xml:space="preserve"xmlns:xlink="http://www.w3.org/1999/xlink"xmlns="http://www.w3.org/2000/svg" y="0px">
<g>
<g id="info">
<g>
<pathd="M10,16c1.105,0,2,0.895,2,2v8c0,1.105-0.895,2-2,2H8v4h16v-4h-1.992c-1.102,0-2-0.895-2-2L20,12H8 v4H10z"></path>
<circle cx="16"cy="4" r="4"></circle>
</g>
</g>
</g>
</svg>
</div>
<divclass="toast__content">
<divclass="toast__type">
Demo</div>
<divclass="toast__message">
Thêm Vài dòng mô tả của bạn ở đây.</div>
</div>
<divclass="toast__close">
<svg enable-background="new 0 0 15.642 15.642"version="1.1"viewbox="0 0 15.642 15.642"xmlns:xlink="http://www.w3.org/1999/xlink"xmlns="http://www.w3.org/2000/svg">
<pathd="M8.882,7.821l6.541-6.541c0.293-0.293,0.293-0.768,0-1.061 c-0.293-0.293-0.768-0.293-1.061,0L7.821,6.76L1.28,0.22c-0.293-0.293-0.768-0.293-1.061,0c-0.293,0.293-0.293,0.768,0,1.061 l6.541,6.541L0.22,14.362c-0.293,0.293-0.293,0.768,0,1.061c0.147,0.146,0.338,0.22,0.53,0.22s0.384-0.073,0.53-0.22l6.541-6.541 l6.541,6.541c0.147,0.146,0.338,0.22,0.53,0.22c0.192,0,0.384-0.073,0.53-0.22c0.293-0.293,0.293-0.768,0-1.061L8.882,7.821z"fill-rule="evenodd"></path>
</svg>
</div>
</div>
<div class="toast toast--yellow add-margin">
<divclass="toast__icon">
<svgclass="toast__svg"style="enable-background: new 0 0 301.691 301.691;"version="1.1"viewbox="0 0 301.691 301.691" x="0px"xml:space="preserve"xmlns:xlink="http://www.w3.org/1999/xlink"xmlns="http://www.w3.org/2000/svg" y="0px">
<g>
<polygonpoints="119.151,0 129.6,218.406 172.06,218.406 182.54,0 "></polygon>
<rect height="40.523"width="40.525"x="130.563"y="261.168"></rect>
</g>
</svg>
</div>
<divclass="toast__content">
<divclass="toast__type">
Demo</div>
<divclass="toast__message">
Thêm Vài dòng mô tả của bạn ở đây.</div>
</div>
<divclass="toast__close">
<svg enable-background="new 0 0 15.642 15.642"version="1.1"viewbox="0 0 15.642 15.642"xmlns:xlink="http://www.w3.org/1999/xlink"xmlns="http://www.w3.org/2000/svg">
<pathd="M8.882,7.821l6.541-6.541c0.293-0.293,0.293-0.768,0-1.061 c-0.293-0.293-0.768-0.293-1.061,0L7.821,6.76L1.28,0.22c-0.293-0.293-0.768-0.293-1.061,0c-0.293,0.293-0.293,0.768,0,1.061 l6.541,6.541L0.22,14.362c-0.293,0.293-0.293,0.768,0,1.061c0.147,0.146,0.338,0.22,0.53,0.22s0.384-0.073,0.53-0.22l6.541-6.541 l6.541,6.541c0.147,0.146,0.338,0.22,0.53,0.22c0.192,0,0.384-0.073,0.53-0.22c0.293-0.293,0.293-0.768,0-1.061L8.882,7.821z"fill-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
</div>
Chúc các bạn thành công!!!
No comments