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.116847 downloads

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.

<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

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 ( _ )

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

My Web Developer Blog

Web Development – ASP.Net – Html – CSS – jQuery

jQuery Modal Popup Window – modalPopLite