Categories
Uncategorized

How to make StackOverflow like message box using CSS and Jquery ?

I have always been a fan of stackoverflow’s message box, so today I decided to re-create and share a similar message box just for fun ! Below is how stackoverflow’s message box looks like…


Below is what I have come up with at… http://jsfiddle.net/yrshaikh/HpYDX/

https://jsfiddle.net/yrshaikh/cCJBn/embedded/

Html code :

<div class="error-box" style="display: block; ">
</div>​

Javascript code :

$(".error-box").append("<p>Some Random Message inside the box.</p>" + "<span>(click on this box to dismiss)</span>" );
$(".error-box").bind("click", function(){
$(".error-box").hide();
});​

CSS code :

.error-box {
z-index: 1;
cursor: pointer;
display: none;
position: absolute;
padding: 15px;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px black;
box-shadow: 2px 2px 5px black;
color: #333 !important;
font-weight:bold;
background-color: #E3E3E3 !important;
font-family:Segoe UI;
text-align:center;
}​

Hope this helps 🙂 I would love to hear your feedback and suggestions, please use the comment section for this.