How to quickly add a modal box in your HTML page – with style

A recent use case I got was,  “put a modal box very quickly in place in a web page”, kinda 10 minutes. And while we’re working at it, not too creepy in terms of design.

Step 1: Using  a recent Jquery version in the <head> of page

Google CDN works fine for bootstrapping, so let’s insert this, as long as you put it inside the <head> of your page, and the first to load (always load Jquery.js as first Javascript library in the head):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Step 2: Download Jquery modal box, host it and include it in the <head> after Jquery

Depending on how you downloaded and hosted Jquery modal, your <head> should look like this:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/jquery.modal.css" />
<script src="js/jquery.modal.min.js"></script>
</head>

Step 3: Use Jquery modal box with any link in page, in the <body>

<body>
<p><a href="#sample" rel="modal:open">Open Modal</a></p>
<div id="sample" style="display:none;"><p>Thanks for clicking. That felt good. <a href="#" rel="modal:close">Close</a> or press ESC</p></div>
</body>

That’s it. From there, you can pull a modal box to any link in page, as long as you use rel=”modal:open” on the link, tied to a hidden <div> in page, hidden by default with CSS style (display:none;). It also works with a full external html page.

Step 4: Final result and demo

<!doctype html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/jquery.modal.css" />
<script src="js/jquery.modal.min.js"></script>
</head>

<body>
<p><a href="#sample" rel="modal:open">Open Modal</a></p>
<div id="sample" style="display:none;"><p>Thanks for clicking. That felt good. <a href="#" rel="modal:close">Close</a> or press ESC</p></div>
</body>

</html>

I put a working demo there.

A simple yet powerful modal box, open to customization

As seen on author page and above, you should get a nifty box opening right in center of page, and putting a shadow on the rest as long as you don’t close it.

sample-modalThis handy Jquery plugin is also fairly customizable – to add forms, buttons and the like – you also have a dedicated css to customize it. So, I invite you to check docs on author page or Github.

Feel free to comment if you have questions, I’ll try my best to answer.