Love the simple but useful plugin. I need to open the model on Page Load.
Can any one please help?

Thanks in advance.

Hi,

I´m getting several elements dynamically by an Ajax-Request. Each of these elements contains a link which should open a modal when clicked. How to achieve this since dynamically generated elements are not 'recongnized' by the jquery selector?

At the moment I use this to initialize the modal:
$(".modal_trigger_login").leanModal({top : 200, overlay : 0.8, closeButton: ".modal_close" });

This works for all the elements which are not generated dynamically but not for the elements which are generated dynamically.

So I tried it with something like this:

$(document).on('click', '.modal_trigger_login', function(){
    $(this).leanModal({top : 200, overlay : 0.8, closeButton: ".modal_close" });
});

But this only works when I click the links a second time and it also seems like it 'initializes' the leanModal on each click, because on every click it adds another lean_overlay div to the page.

Thx in advance and sorry for my english

I'll put this in as a request, but I've added event triggering on my local copy. I wanted to execute some AJAX based upon the overlay being opened or closed.

After: e.preventDefault();
$(_4).trigger('modal', ["open"]);

After: $("#lean_overlay").fadeOut(200);
$(_8).trigger('modal', ["close"]);

When the viewport is smaller than the modal popup, you cannot scroll it to see the additional content or close box.
FIX: change style: position from fixed to absolute

In chrome, after the trigger is clicked and the modal window is displayed, the overlay does not show. If I scroll the window while the modal is open the overlay pops into view.

Browser Details:
Version: 34.0.1847.116
Platform: Mac OSX 10.9.2

Is there any option to move the popup to the right edge of the screen?

Maybe I'm missing something, but the project name implies a modal popup. Real modal popups can't be dismissed by just clicking anywhere outside the popup (in fact that is the whole point of modal windows--to force the user to take some action or wait until something is finished).

So you should either rename your project or add actual modal support. And along with that it obviously would need programmatic support for closing the popup for situations where there is no user interactivity (informative only).

Open windows from another

For example in a window of login and a "Forgot password?" that opens and closes the fenere opens another

the variable modal_height

30  var modal_height = $(modal_id).outerHeight();

is defined but not be used.

Modal dialogues (vs popups) are ones that require action before the user can continue interaction with the page content. I love the idea of a lean modal script that doesn't intend to be the be-all end-all for everyone swiss-army knife style, but it would be fantastic to have an option to require interaction within the modal window vs click off.

Any chance we could see that added?

How to auto open leanModal after ajax call success?. Please help me

Hi,

I am using your plugin but a lot of people who use my site say that it would be very helpful to have an X button to close the popup window, because some of them don't know to just click anywhere. The X could just be set to the side or something, so that they would still be able to click anywhere to close the window, but they could have an indication of where they can click.

Thanks and please let me know if this is possible and how I can do this!

• vannemic

I'm wondering whether adding this feature to leanModal.js would be worthy?

I for one love being able to dismiss things that "popup" from webpages by attacking my Esc key, and am somewhat depressed that this isn't currently included in this project.

Given that supporting such a thing wont add too much to the code base (thus keeping the 'lean' approach to a modal intact), I for one feel as though it would be a worthy addition.

The documentation says to...

$("a[rel*=leanModal]").leanModal();

Using rel= in this way in the <a> tag is deprecated.

I recommend removing the rel= and the name= from <a> and using a class name instead...

$(".yourOwnClassName").leanModal();

This will help pass W3C HTML Validation.

If you want multiple instances of the modal in the same page, even if you attached to diffrent element a new div with id #lean_overlay is created and placed at the bottom of the page. They should have unique ids.

HI,

lean modal is great. i want to open lean modal on image map. i tried but on click image map nothing happens.
Please help.

Thanks

Ids should be uniques.

Each time a new modal is opened, a new div with id #lean_overlay is created and placed at the bottom of the page (trusting what Google Chrome inspector is showing me...)

Previous #lean_overlay divs should be removed.

Hoping someone can assist - am trying to initialize a lazy loader into modal window

I am using "Lazy Load XT jQuery plugin" by Ressio - works in index page, however in Modal window images will not load

I have got a proof of concept working using jQuery on() Method which I added to jquery.leanModal.js:

$(modal_id).fadeTo(200, 1).on("click", '.MyContentDiv', function() {
    setTimeout(function() {
        $(modal_id).lazyLoadXT();
    }, 50);
});

This is based on lazyLoadXT's AJAX method at:
https://github.com/ressio/lazy-load-xt

All this achieves is with modal window opened, by clicking within MyContentDiv lazyLoadXT is initialized, and only images within the viewport

How do I initialize lazyLoadXT after the modal is open

Hey, maintainer(s) of FinelySliced/leanModal.js!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library FinelySliced/leanModal.js is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "FinelySliced/leanModal.js",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Hi,

I understand that currently it is possible to click anywhere on the window to close the popup. Is it possible to disable such functionality?

I just want the popup to be closed by the close-button.

Thank you very much in advance

Leanmodal works great; however, in IE7, the overlay sits on top of the modal, so the modal is darkened. It is setup just like it is on your examples page.

jQuery: $("a[rel*=leanModal]").leanModal({ top : 200, overlay : 0.5, closeButton: ".modal_close" });

CSS: .hidden{ background:#f3f3f3; padding:30px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; position:relative; display:none;}

lean_overlay { position: fixed; z-index:10000; top: 0px; left: 0px; height:100%; width:100%; background: #000; display: none}

Any Ideas how to make this work, or this is a known bug?

Thank you for sharing this great project.

How can i call leanModal inside an conditional IF?

I have an if inside an $( document ).ready(function() { if(){}}

I just try:
$( document ).ready(function() { if() { $("#submitButton").leanModal(); } }

The modal does not open, i check the files (CSS/JS) and they are declared .

Could you please provide an example, i think it is a very commom situation.

To get leanModal working as a zepto plugin, a few small changes are needed:

    // Zepto doesn't have $.fn.extend()
    //$.fn.extend({ 
    $.fn.leanModal = function(options) {

and

                // Zepto doesn't have .outerWidth(), and modal_height not used!
                //var modal_height = $(modal_id).outerHeight();
                //var modal_width = $(modal_id).outerWidth();
                var el = $(modal_id);
                el.css({'display': 'block', 'opacity': 0});
                var modal_width = (typeof el.outerWidth != 'function') ? el.width() : el.outerWidth();

.width() returns 0 if the modal is display:none, so 'display' it first, but transparent.

})(window.jQuery || window.Zepto);

You will need the core zepto.js library, as well as the zepto.fx.js and zepto.fx_methods.js plugins, for the fadeIn/Out animation to work.

Improvement: added preventDefault to lose hash in URL when closing modal with link:

$(o.closeButton).click(function(e) {
    close_modal(modal_id);
    e.preventDefault();
});

Hi,

I am trying to implement the modal window to 'update' a record. To do so I need to pass a parameter to the modal window. Is this possible ?
This way I can tell the modal which recordset to edit when I post the form to another page.

Help is greatly appreciated.

Seems to work ok but using the close function it closes both modals when I only want it to close the current one. Is there a way round this? Thanks.

Have a scenario where I need to show a leanModal instance - but this time it is not because of a CLICK but because of another dom event.

How do I do that?

Howdy.

First of all, thanks for the great plugin. Now on to the issue...

On large screens the modal has a fixed width. At a certain breakpoint (called $large right now -- yeah, I'm going to be updating this project's naming conventions soon!) I switched its width to 100%, left and margin-left to 0, so that on smaller screens the modal screen snaps to the edges.

Everything works great so far.

Now, if I click open the modal window while my browser screen is small (so that the modal with 100% wide), and then stretch my browser screen to a large size, then the modal window has trouble centering itself. Rather than being nice and centered, it sits off to the right a bit.

Any ideas would be much appreciated.

Thanks!

P.S. Forgot to mention a gist with my markup and modal styles: https://gist.github.com/swthate/b94c5c15715d04606692

another option could be well autOpen

   $("#my_box_wellcome").leanModal({
                autoOpen:true
                });

Hey,

I am adding modals dynamically with jQuery's prepend function. On all other browsers this is fine, the modals work perfectly. But on IE7 an error is thrown.
"Syntax error, unrecognized expression: http://10.0.1.4/#IC-99-modal-wrapper"

This is the markup for the button that is prepended to it's parent

This is the wrapper markup for the modal that is prepended to it's parent

This is the js I call when the page loads, inside jQuery document ready
$("a[rel*=modal]").leanModal({
top: 200,
overlay: 0.4,
closeButton: ".modal_close"
});

Has anyone else tried using leanModal with dynamically added elements?

Sorry if this has been covered, but is there any way to prevent this?

Thanks,

Rick

While I love the simplicity of this 'plugin', it doesn't appear to be responsive. Any chance you will be updating it to respond well (perhaps change to 100% width and margin and position on left of 0) to small screens?