Bare bones modal dialog windows.



Examples: Basic | With Close Button


How To Use

Step 1: together with JQuery, include jquery.leanModal.min.js in your page, thusly:

<script type="text/javascript" src="path_to/jquery.leanModal.min.js"></script>

Step 2: rather than call another stylesheet, simply include the following overlay style block in your existing stylesheet. Additionally, be sure to hide your modal element with 'display: none;' (although that probably goes without saying).

#lean_overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    background: #000;
    display: none;

Step 3: call the function on your modal trigger, as follows. Be sure to set the href attribute of your trigger anchor to match the id of your target element.


...or, if you want more than one modal window on the same page, simply add the 'rel' attribute to your triggers, and call the function by attribute, like so:



In the spirit of keeping things simple, there are only two three options involved: vertical position of the modal element in relation to the document body (default is 100px from the top), the overlay opacity (default is 0.5), and a close button option (default null). You can override these defaults by passing your desired values to the function, like so:

$("#trigger_id").leanModal({ top : 200, overlay : 0.4, closeButton: ".modal_close" });

Simple, and sweet.


Available under the MIT and GPL licenses.

Change Log

Feb 2012: v1.1 - added a closeButton option. Fixed multiple spawn of #lean_overlay.

Support & Feedback

For issues or suggestions please see leanModal on Github, or tweet @finelysliced.

Thanks for your support!

Create a new account

It's simple, and free.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum libero purus, convallis nec vestibulum eget, luctus vitae purus. Vestibulum non mauris et sem vulputate pellentesque ac a turpis. Ut vel lacus vitae justo vestibulum lobortis. Nunc ipsum ipsum, laoreet id dictum nec, fermentum vel purus. Maecenas nisl felis, faucibus non rutrum eu, sollicitudin sed ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent dignissim lacinia tempus. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Nulla accumsan pellentesque velit, a malesuada diam tristique a. Fusce eleifend magna erat, et imperdiet orci. Quisque sapien mauris, malesuada eu tristique pulvinar, placerat id ligula. Vivamus vitae viverra nulla. Donec eget turpis vel erat malesuada sodales.