jQuery Modal Popup Window – modalPopLite

This is jQuery Super Lightweight, Super Simple (Modal) Popup Dialog Box – 1.5KB. No Fuss.

It supports fading background and rounded corners, very simple to setup and use, no complex features just a quick and simple but effective dialog box.

A simple demo with minimum code can be found here: http://www.mywebdeveloperblog.com/projects/modalpoplite/demo/



Or fork me on https://github.com/shibbard/jQuery-modalPopLite

Step 1: Include files.

Step 2: Attach the popup to a container on the page providing reference to open button(s) and close button.

Step 3: Create the page with an element to click and open the popup and a close button.

Click Me!




  • openButton – target element to open the popup (eg ‘#clicker’ or a class ‘.clicker’)
  • closeButton – target element to close the popup
  • isModal – true or false. If true the popup is modal and clicking the background will not close the popup. Only the ‘closeButton’ target will.
  • callBack – Name of function to call when the popup is closed

  • Marko

    Is there possibillity to make it appear automatically? Thanks

    • Simon

      You can use a trigger on the button it is attached to, if necessary hide the button with CSS e.g. #hide-btn{display:none;}

      • Tom

        I tried to load the popup automatically using trigger on the button but it doesn’t work and doesn’t give me any errors either..can you please put the whole example to see if I’m missing something? Thank you

  • MetalWing

    I attached an X button to the top right corner to allow closing popup. I want, however to disable closing popup by clicking anywhere outside of it. Is there an easy way to do that?

    Thank You

    • Simon

      Hi, I have just put up version 1.3.0 – this has a new option ‘isModal’. Set this to true and the background will not close the popup.


    • http://na andre

      just delete this a tag within the div.

  • http://- Amarok

    Hi, thanks for sharing!
    Keep up this good job, many people just like me do need it!
    Have nice days ahead!

  • sachin

    Thanks Simon. Its great plugin simple and concise.

  • http://na andre

    this is very simple and easy to set up, I want the pointer to turn into hand when I go over the link “click me”
    and I want to re size the popup container box, how do I do that.

    • Simon

      If you want the curser to change then simply set the css for that element, i.e. #clickme{ cursor:pointer;}

      To fix the size of the popbox just set the height and width of whatever element you are applying popbox too. So you set css for: #popup-wrapper{height:100px;width:100px;}

  • Dan

    Hi, Simon, is it possible to close this popup on escape?

    • Simon

      Hi Dan,

      You could catch the escape key and trigger the close button, something like:

      $(document).keyup(function(e) {
      if (e.keyCode == 27) { $('#closeBtn').trigger('click'); } // 27 is esc button

      • Hirantha

        For escape button code You should use the same
        button. here you have missed the underscore ( _ )

        • Santosh Vishwakarma

          if (e.keyCode == 27) { $(‘#close-btn’).trigger(‘click’); }
          userscoremissing and b in capital latter

  • Ardhan

    Hi Simon, you’re plugin is great. i’m a newbie actualy, and want to ask something. is it possible to show table to this popup window? i mean, i want to add form to edit a person data (example: customer with id 001 from tb_person), and then below this person form editor, i wanna show table that show transaction from this person (example: select * from tb_transaction where cust id = 001). thanks for sharing. sorry for my bad english.. 🙂

    • Simon


      Basically you want to add a function call when edit is clicked to populate the html of the popup container. Best bet is to use jQuery Ajax to call GET to get the form from the server, update the details and the POST them back to the server. Look into jQuery AJAX, how to GET html content and then you can post the form back with the updated details.

  • reza

    tanx for your plugin…
    how can i test pre-loader? i mean i want to see if your ajax-loader works or not…
    tanx again

  • Hirantha

    Thank You very much. Your work is great. Keep on the good work.

  • Johnny

    Any ideas how to get it to support multiple boxes in one page? I tried using it for photos, it just stacks the phots on top of each other.

    I changed the #popup-wrapper to .popup-wrapper (same for #clicker and #close-btn), but other than that I am unsure of what to do.

    • Simon

      Hi, I’m afraid you are looking for something very different, this is based on modal popups which in essence means only 1 popup. Otherwise much more complexity is involved in managing multiple windows and where they will be positioned on the page and relative to what etc. This is not in scope for this plugin sorry.

      • Johnny

        ok, thanks for the reply 🙂

    • http://www.facebook.com/shawn.m.mcarthur Shawn Maperformance McArthur

      I made this work by including a second script using a different id for both the wrapper and the openButton. See this example:

      $(function () {
      $(‘#popup-wrapper’).modalPopLite({ openButton: ‘#clicker’, closeButton: ‘#close-btn’, isModal: false });

      $(function () {
      $(‘#popup-wrapper2’).modalPopLite({ openButton: ‘#clicker2’, closeButton: ‘#close-btn’, isModal: false });

      Then I just made the second DIV on my page with id=”popup-wrapper2″ for the other dialog.

  • Greg

    Hi there

    Thanks a lot for the plugin – it’s really nice that I can put whatever into it 🙂

    But I have a problem which I hope you can help with:
    Right now the popup is centered in my browser window, I think it is because of


    But either way I would like to absolute position the popup to a specific point – but I am at a loss of how to do it.
    The css has a bunch of .popBox references, but I can’t find that class anywhere in my HTML or the .js file.

    Have a good day! – Greg

    • http://www.facebook.com/anakarina Ana Karina Luna

      I would like the same thing: to be able to have the pop box open at a specific place on the page (I think though that means to make it relative, instead of absolute, Greg?)

  • http://www.pixelitte.com Ankita

    You helped a lot.
    But I need something more like fading the entire bg when the popup appears and on clicking the background the popup closes.Please help.Thanks.

    • shibbard

      The isModal setting controls whether clicking on the background will close the window or not.

  • http://www.certaintysoftware.com Brian

    I am using this popup on my MVC website but the callBack parameter does not work. I am getting this error:
    Error: Object doesn’t support this property or method

    I don’t see what I have done wrong:
    function attachDetailPopup(detailId) {
    $(“div.rowDetail#div-” + detailId).modalPopLite({
    openButton: “.row-” + detailId,
    // closeButton: ‘#close-btn-‘ + detailId,
    callBack: ‘clearDetail’,
    isModal: false

    • Simon

      The callback function should not be in quotes.

  • http://www.facebook.com/people/Laurie-Starkus-Cote/1394979254 Laurie Starkus Cote

    I am trying to use this on an ASPX page but it doesn’t seem to work. I am getting a firebug error on the line:

    It says “syntax error”. Will this code work in an aspx page?

    • shibbard

      Hi yes it will work on any page that includes the jquery library. If you have a problem post a link to the page if you can and i can take a look.

  • Ray

    Works great, but on dynamic pages that load more the 300 records the popup displays for a few seconds until the page is fully loaded. Is there a way to prevent this.

    • Ray

      I figured it out. I set the div wrapper style to none and then changed it to show with jquery when the page ready event fired.

      • http://www.facebook.com/shawn.m.mcarthur Shawn Maperformance McArthur

        Can you clarify the steps for this? I’m having the same issue but don’t know exactly how to implement your suggestion.

        • Ray King

          Use the jquery document ready Event and put

          $(document).ready(function() {

  • Joe


    Awesome plugin and easy to setup. I’m having an issue though.

    I’m using tables within the popup dialog and once I display long text into the table, it will go out of the screen, but once i zoom out then ctrl + 0(default browser size) it will fit perfectly, any fix for this?

    • shibbard

      hi do you have a link i can look at to try and see what is going on? Its not something i have come across before.

      • Joe

        Hey, I uploaded a sample project to appharbor, here’s the link:


        When you go on that, click the ‘Open’ button and it should popup with the dialog, click update text and click ‘Open’ again. The dialog should appear out of the screen, and when you zoom all the way out then ctrl + 0, it should fit perfectly inside the browser.

        I am also using a laptop if that makes a difference, so maybe larger and/or widescreen monitors may not have this issue.

  • http://jquery4u.com/ jQuery4u

    Cool, thanks for the share! Sam

    • shibbard

      Nice site btw loads of useful info 🙂

      • http://jquery4u.com/ jQuery4u

        Thanks bro! 🙂

  • http://www.facebook.com/rayyad1990 Raed Ayyad

    great Work man , Can i do it in load the page ?
    if I can ? how to do it ?

    • shibbard

      You can use a trigger on the button it is attached to, if necessary hide the button with CSS e.g. #hide-btn{display:none;}

      $(document).ready(function () {

  • eLmack


    do anyone know how to send a PHP variable to a modal window??

  • Kashif

    thanks, it helps me a lot….

  • mpa

    doesn’t work as it is described. if I put the 3 lines of the step3 in my html..everyone of then are shown and does open any thing..

  • http://www.facebook.com/owusu.marfo Owusu Marfo

    can someone help with loading the content from an iframe?

  • Komal Shinde

    hii i am using this popup and it helped me a alot. But the query is, it works on localhost very well, but when uploaded to server,while page loading it opens all the popups for a sec and disappears. working perfectly there also but each time on page load it opens all the pop ups and closes. you can see exactly what is happing here :


    I am using the popup for “login”, “make a wish” and “search”.

    Please do check this and tell me what to do?

  • Ashley Bedwell

    I am by no means a programmer, but I implemented a basic modal dialog on our Intranet page. It works, but I need it to lock the browser until the user accepts the terms of use (by clicking the “I Accept” button). What is my script missing?

  • Greg Faulkner

    I am trying to call a function at the close of the pop up but it isn’t working.

    The code is:

    $(function () {

    $(‘#popup-video-wrapper’).modalPopLite({ openButton: ‘#clicker’, closeButton: ‘#close-btn’, isModal: true, callBack: reloadPage });

    $(‘#popup-video-wrapper2’).modalPopLite({ openButton: ‘#clicker2’, closeButton: ‘#close-btn’, isModal: true, callBack: reloadPage });

    $(‘#popup-video-wrapper3’).modalPopLite({ openButton: ‘#clicker3’, closeButton: ‘#close-btn’, isModal: true, callBack: reloadPage });


    function reloadPage() {
    alert(‘Window closed’);

    When the page loads, I see the following error 3 times:

    Error: Error: Permission denied to access property ‘toString’

  • Dhanuka

    Thank you very much you saved my life … 🙂

  • http://www.facebook.com/paul.handley.56211 Paul Handley

    Hi! I like the simplicity of your popup. I would like to attach a popup to each node of the tree a different popup for each node, no two to open at the same time of course. how could I do that?

  • Suneel Kumar P


    I tried the code and it works perfect. Can you help me how to use the code for page onload instead of onclick.


    • shibbard

      create as normal with a button that opens the popup, hide the button with css and then call trigger on page load like:

      $(function () {

  • Airlines App

    Hi, Thanks a lot for this. What to do in case we need to go to another popup from a popup?

    • shibbard

      Sorry that is not supported, but having popups over popups is not very good user interaction. Maybe just hide the current popup content and replace with new content and then hide again to show the original content if needed.

  • fkingbullshit

    Seriously, i cant even copy the fking texts?? fkc this tutorial gonna find an other one.

  • Santosh Vishwakarma

    diffrent img open at diffrent position in moda

  • Santosh Vishwakarma

    multipal img not open to proper position

  • Heidi Traband

    This is great! I adjusted the code so the popup window comes up on page load. Is there a way to adjust the code so the window only pops up once per uesr/IP address?


  • anichandran ayyanallur

    very nice . i am used lot. thank you work well

  • jquerybyexample

    Here is a link of top 10+ jquery popup window plugins on my blog. These jquery plugins are awesome and full of some wonderful features……

    Top 10 jQuery Popup window plugins

    Hope you like them and find useful..

  • Abhishek Luv

    Hi, I am using Modalpoplite. Issue is all my popup modals open at different positions on the page. How can I make all the modals to open up at the centre of the page. please guide.Thanks

    • Gopikrishna

      hi abhishek can u please help me ..how can i close this modalpoplite window on esc key press

      • Nelson Nadar

        $(document).keyup(function(e) {

        if (e.keyCode == 27) {




        add the above code to your api file for ‘ESC on close’ functionality

        • Gopikrishna

          it’s not working for me…

    • Adnan King


    • Manu

      Use the code in this video
      This video includes all the steps need to do for a custom pop and a great look to HTML + CSS + jQuery

  • Chris

    This is really helpful. What if I want to position the popup box below my link, assuming I have a couple of links block-inline’d? Any idea for this? I would appreciate the help.


  • Mark Libbrecht

    Hi, I wanted to start by saying it’s a great popup, however, since I’m a jquery newbie, I would like to ask how I can add a button to my popup which can close the popup. I tried adding the class”b-close” to the button, but then the position of the button changes to the upper right corner (and hides my X). How can I add this functionality ?? many thanks, Mark

  • Shahbaz Ahmed Bhatti

    Dear Shibbard First of All So many thank fo rthsi kind Pop up i was Looking fo rthis. i need some help i want when website load the pop up window also open
    like we click and it open i want onload can u please guid eme please

  • pan

    so good 谢谢

  • Mutlu West

    Hi everyone, I have use this in a gridview control and try to display detailsview in the modal dialog box and i am getting this error now “Object doesn’t support property or method ‘modalPopLite’ ” Could you please give me some ideas why do i get and how to get rid of it please? Thanks

  • Mark Slade

    I’ve modified the code so to use the “.on” event rather than “.live” if anyone is interested then let me know

  • max

    Hello, I used this pieace of art and it really works fantastic! Congrats!!!
    However, after using this I also noticed that whenever I want to use two popups at the same page, it doesnt work as intended.

    How can I use multiple JQuerys popoups on the same page??
    Thanks in advance 🙂

  • tomncoffee

    Thanks for building this. Howver, I had to completely strip all CSS from this page in order to simply copy the texts in Steps 1, 2, 3. You may want to put this information in a simple text file in your zip.

    Step 1: Include files.

    Step 2: Attach the popup to a container on the page providing reference to open button(s) and close button.

    $(function () {
    $(‘#popup-wrapper’).modalPopLite({ openButton: ‘#clicker’, closeButton: ‘#close-btn’ });

    Step 3: Create the page with an element to click and open the popup and a close button.

    Click Me!

    I am a popup box. Content can be anything.

    • אלי אסרף

      hiii tom im a web-master student and the 1,,2,3 steps are not so clear can u tell me what i have to put on my html page i can really get to understand ur steps thanks man….

  • http://www.anichandran.webs.com/ anichandran ayyanallur

    verynice popup , thanks lot

  • Darell Gensaya

    what if i want to use this as ONLOAD POPUP? no need to click any button to show.

  • palvinder

    Great !

  • Denys

    How to initialization open modal window or close without push button:
    User send form from modal window and after success from server I want close window. How ?

    Like $(‘#popup-wrapper’).modalPopLite.close or something like that.

  • veer kushwaha

    The Code for Honor contest by Microsoft is a fabulous opportunity for talented developers in India to showcase their flair for developing unique apps. I wish I could participate! I work as a freelancer and don’t think fit into the eligibility criteria. Anyways, wish all my buddies who want to participate, good luck!Click on the link to know more and participate http://bit.ly/19nbuG0

  • Mohit Badhwar

    i want to show it on page load

    $(function () {

    $(‘.popup-wrapper’).modalPopLite({ openButton: ‘.clicker’, closeButton: ‘#close-btn’, isModal: true });



    now it is connected with link
    tell me any updation so i can call it on page load event in asp.net

  • Mohit Badhwar

    how to call it on page load event using asp.net in if and else condition

    $(function () {

    $(‘.popup-wrapper’).modalPopLite({ openButton: ‘.clicker’, closeButton: ‘#close-btn’, isModal: true });


    i used it on panel i want to activate that panel on page load event code behind

  • Mohit Badhwar

    how to call it on page load event in C#

    $(function () {

    $(‘.popup-wrapper’).modalPopLite({ openButton: ‘.clicker’, closeButton: ‘#close-btn’, isModal: true });


  • http://aviv.mw.lt Hoki

    I need help, I cannot put more than 1 popup on 1 page. any solution?

  • אלי אסרף

    i cant get this popUp to work what i have to do on my html????thanxs

  • magic

    This is also very simple pop-up :- http://www.magic2php.com/very-simple-popup/
    single HTML file only you have to download that’s all.

  • Jegadheesan Muthusamy

    How can i make it as draggable?

  • bourasom

    I tryed to use the callBack function. My function was always considered as undefined. As WA, I introduced it in

    $(closeObj).live(“click”, function (e) {


    It do the needed stuff for no. However, is there a correct solution to avoid patching the used js. I am using the 1.3.1 version

  • manu

    There is another tutorial which explains how to create you own captcha system using jquery and css with demo without any help plugin on TalkersCode.com you can refer this http://talkerscode.com/webtricks/simple%20and%20best%20custom%20popup%20box%20using%20jquery%20and%20css.php

  • http://www.gift.edu.in/ GIFT Engineering College

    Nice one. Alternative available at gift.edu.in, the best engineering college of Odisha’s website

  • Weblounge Ketan

    da lamborume pipo dhe mostla yewj beem beem beem

  • Андрей

    How can i set the text with jqwery functions to the content space?
    ($(‘#popup-wrapper’).text(“Hello world!”); did not working)
    Is this imposible? or i can do it only by hands?

  • http://www.w3technology.info/ Navazkhan
  • sebin

    hii.. I am using Modalpoplite. include textboxs in Modalpoplite but issue is .. i can’t get values from textboxs .please guide.Thanks

  • Manu

    See the video showing how to create a custom popup using jquery.
    This video includes all the steps need to do for a custom pop and a great look to HTML + CSS + jQuery

  • William Monroe

    Thank you for this nice tutorial! I have recently been usong a window function from shieldUI, that is extremely customizable https://demos.shieldui.com/web/window/basic-functionality check it out here