Code CSS Javascript

How to Create Simple Modal Dialogue using JQuery

Here is a simple jQuery based Cross-Browser modal dialogue.

Below you can find a simple script, which works with jQuery to show a decent cross browser modal dialogue, The dialogue can have any html that you want. The css here should be used to produce desired results.

See the Pen jQuery Modal by Umair Jabbar (@umairj) on CodePen.

CSS How to Tips

CSS Clearfix Best Cross browser solution

Clearing the divs has always been a solution for web 2.0 sites but there are many ways to implement it. The reason of this post is not to go in the details but giving a simple cross-browser css solution. BTW I prefer this css solution rather than adding the ugly empty clear div all over your html and polluting the markup.

Bad Solution :

<div style="clear:both"></div>

Perfect Cross Browser Solution:

add the css below to your site wide CSS file. and then apply the class clearfix to any containers that need to be cleared, or the containers in which you are adding the clear-div. and yes remove the clear-divĀ of-course.

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;

.clearfix {
	display: inline-block;

html[xmlns] .clearfix {
	display: block;

* html .clearfix {
	height: 1%;
	overflow: visible;