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/

Download Here v1.3.132846 downloads

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

Step 1: Include files.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="modalPopLite1.3.1/modalPopLite.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="modalPopLite1.3.1/modalPopLite.min.js"></script>

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

<script type="text/javascript">
$(function () {
    $('#popup-wrapper').modalPopLite({ openButton: '#clicker', closeButton: '#close-btn' });
});
</script>

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

<div id="clicker">Click Me!</div>
<div id="popup-wrapper" style="background-color: #ccc;">I am a popup box. Content can be anything.
<a id="close-btn" href="#">Close</a></div>

Simple.

Options:

  • 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

  • Jegadheesan Muthusamy

    Hi
    How can i make it as draggable?

  • 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.

  • אלי אסרף

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

  • http://aviv.mw.lt Hoki

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

  • Mohit Badhwar

    how to call it on page load event in C#

    $(function () {

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

    });

  • 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

    i want to show it on page load

    $(function () {

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

    });

    Close

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

  • 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

  • Denys

    How to initialization open modal window or close without push button:
    Example:
    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.

  • palvinder

    Great !

  • Darell Gensaya

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

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

    verynice popup , thanks lot

  • 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.
    Close

    • אלי אסרף

      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….

  • 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 :)

  • Mark Slade

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

  • 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

  • pan

    so good 谢谢

  • 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

  • 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

  • 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.

    Thanks

  • 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) {

        $(closeObj).click();

        }

        });

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

        • Gopikrishna

          it’s not working for me…

  • 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..

  • anichandran ayyanallur

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

  • 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?

    Thanks!!

  • Santosh Vishwakarma

    multipal img not open to proper position

  • Santosh Vishwakarma

    diffrent img open at diffrent position in moda

  • fkingbullshit

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

  • 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.

  • Suneel Kumar P

    Hello,

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

    Thanks,
    Suneel

    • 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 () {
      $(‘#popup-button’).trigger(‘click’);
      });

  • 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?
    Thanks,
    Paul

  • Dhanuka

    Thank you very much you saved my life … :)

  • 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’

  • 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?

  • 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 :

    http://btplshowcase.co.in/elance_task/home

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

    Please do check this and tell me what to do?

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

    can someone help with loading the content from an iframe?

  • 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..

  • Kashif

    thanks, it helps me a lot….

  • eLmack

    Hi

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

  • 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 () {
      $(‘#hide-btn’).trigger(‘click’);
      });

  • http://jquery4u.com/ jQuery4u

    Cool, thanks for the share! Sam

    • shibbard

      Nice site btw loads of useful info :)

      • http://jquery4u.com/ jQuery4u

        Thanks bro! :)

  • Joe

    Hey,

    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:

        http://testdialog.apphb.com/

        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.

  • 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() {
          $(‘#popup-wrapper’).show();
          });

  • 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.

  • 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.pixelitte.com Ankita

    Hi
    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.

  • 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

    .modalPopLite-wrapper
    {
    position:fixed;

    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?)

  • 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.

  • Hirantha

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

  • reza

    hi…
    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

  • 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

      Hi,

      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.

  • Dan

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

    • 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

  • 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.
    thanks.

    • 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;}

  • sachin

    Thanks Simon. Its great plugin simple and concise.

  • http://- Amarok

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

  • 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.

      Simon.

    • http://na andre

      just delete this a tag within the div.
      Close

  • 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;}

      <script type="text/javascript">
          $(document).ready(function () {
              $('#hide-btn').trigger('click');
          });

      </script>
      • 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