I was working on a project, where I had to design a login panel. It had two columns, one for Login and one for registration. Now the problem was, when I made the initial commit to git, I forgot to insert an alert notification. I have to show some error when someone use wrong username password or missed a field in the registration form, or the username he is trying to get is already registered. That sort of stuff.

Now as I was using bootstrap, I can simply use the bootstrap alert. All I needed to do is insert the HTML code. But that I thought, why not a different approach? Especially I loved the alert UI of WordPress admin panel. So I figured, let’s shake some code ( not booty ).

I was about to write the whole thing here, but a friend suggested that I should circulate it to a broad network. And my first choice was Bootsnip. Probably the largest collection of bootstrap snippets. Helping me in my work for more than a year. So i put it there.

So I believe You must have Heard about modal. IF not, I can bet you have already seen it, Just don’t know what it was. Lets just say, One of your Facebook Status got 50 Likes, Now you wanna see, By whom. Like ” Bill Gates, Linus Torvalds, Mark Shuttleworth And 47 others like this“. You will click on ” 47 Others like this ” and a box will come up, With the name of all those people liked it. Basically that box is a smart Example of HTML modal. Its one Kind of Inside Pop-up Window. You can use it for Login box, For Ads, For Information, For Anything. Now There are a lots of jQuery Stuff to create a model. Even The Great Bootstrap Has a modal built in. By the Way, Some people Even Call it Dialog ( As jQuery Officials Did ) .

Here is Some nice Example And link of JQuery Modal Aka Dialog [ Link ] .

Our Way

But, The Awesomeness of HTML5 And CSS3, Opened a new era of Web Development. Now, You can do the Complex work with jQuery or Simple Javascript [ If you prefer working much ]. Ad leave the Design Section to CSS3. Well, We will make a Similar modal with CSS3. So, if the client Browser Failed to load jQuery [ Lets just guess Google Was Sleeping ], Your Modal Will still work.

So what do we need? Nothing. Just get a Text Editor, Anything you prefer and Let set go.

The HTML

To Trigger the modal, You will be needing a Action, What will be done with a link. A Anchor.

&lt;a href="#openModal"&gt;Kick The Modal&lt;/a&gt;

1	<a href="#openModal">Kick The Modal</a>

So, Now we need the Content of The modal,

<div id="openModal" class="modalBox">
	<div>
		<a href="#close" title="Close" class="close">X</a>
		<h2>I am a Modal</h2>
		<p>I am Very Useful, if you know where to put me </p>
		<p>You Surely want something Cool, I am freezing </p>
	</div>
</div>

<div>

<h2>I am a Modal</h2>

<p>I am Very Useful, if you know where to put me </p>

<p>You Surely want something Cool, I am freezing </p>

</div>

Remember, The Model Will be triggered using the anchor, So you have to carefull about choosing the model ID.

The CSS

So, Lets Kick some CSS.

.modalBox {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif; 
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;  
	opacity:0;
	-webkit-transition: opacity 400ms ease-in; 
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}

.modalBox:target {
	opacity:1;
	pointer-events: auto;
}

.modalBox > div {
	width: 400px;  
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
}

.close { 
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }

.modalBox {

position: fixed;

font-family: Arial, Helvetica, sans-serif;

top: 0;

right: 0;

bottom: 0;

left: 0;

background: rgba(0,0,0,0.8);

z-index: 99999;

opacity:0;

-webkit-transition: opacity 400ms ease-in;

-moz-transition: opacity 400ms ease-in;

transition: opacity 400ms ease-in;

pointer-events: none;

}

.modalBox:target {

opacity:1;

pointer-events: auto;

}

.modalBox > div {

width: 400px;

position: relative;

margin: 10% auto;

padding: 5px 20px 13px 20px;

border-radius: 10px;

background: #fff;

background: -moz-linear-gradient(#fff, #999);

background: -webkit-linear-gradient(#fff, #999);

background: -o-linear-gradient(#fff, #999);

}

.close {

background: #606061;

color: #FFFFFF;

line-height: 25px;

position: absolute;

right: -12px;

text-align: center;

top: -10px;

width: 24px;

text-decoration: none;

font-weight: bold;

-webkit-border-radius: 12px;

-moz-border-radius: 12px;

border-radius: 12px;

-moz-box-shadow: 1px 1px 3px #000;

-webkit-box-shadow: 1px 1px 3px #000;

box-shadow: 1px 1px 3px #000;

}

.close:hover { background: #00d9ff; }

Well, The Code is Pretty Clear, If you know what you are doing actually. Now Lets Get a Live View of It,

Hope You find It useful.

iOritro

Geek, Procrastinator and Over-thinker

HTML5

A different approach to Bootstrap Alert