ad

Stylish Message Box with jQuery And CSS

demo_message

Hello reader, In this post, i am going to write how to make an stylish message box with jQuery and CSS. It also have a close button which allows users to close this box.

Stylish message box with jquery and CSS

Demo Download

CSS: Change this code to modify the style of alert box according to your website’s theme. You can make more stylish boxes with this code.

.alert{
background:#ffffff;
border:1px solid #bbbbbb;
color:#6D6D6D;
padding:10px 10px 10px 60px;
margin-bottom:20px;
position:relative;
}
.alert:before{
background:#bbbbbb;
top:0;
left:0;
bottom:0;
width:50px;
position:absolute;
}
.alert p{ margin:0; }
.alert.success{
border-color:#b0d86e;
color:#578C00;
background:#b0d86e;
}

.alert.success:before{ background:url(success.png) no-repeat center center #DBF0B8; }
.alert .close{
position:absolute;
right:0px;
top:0px;
background:url(close.png) no-repeat center center #bbbbbb;
padding:1px;
height:13px;
width:13px;
display:block;
text-indent:-9999px;
-webkit-border-radius: 0 0 0 3px;
-moz-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
}

jQuery: This part is used to add close event in the box. When you will click on the close icon of the box, this function will hide it from the page.

jQuery(document).ready(function($){
$('.close').click(function() {
$(this).closest('.alert').fadeOut();
});
});

HTML: This is the HTML markup which will add the box on the page. Add this code where you want to show the message box.

<div class="alert success">
<p><strong>Success Messag Box.</strong> Your message goes here.</p>
<p><a class="close" href="javascript:void(0);">Close</a></p></div>
<p>Click on the X at the top right corner of the box to close he box</p>
</div>

I tried to make this article as simple as possible. I hope you enjoyed this article. Comment below, if you have any problem in implementation.

Tags: | |
Nord VPN Sale

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.


Similar Articles

0 Comments

Leave a comment

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

2020 UseThisTip | Developed By Deepanker