I can't resize the width of the modal. I'm using rails and I have:

<%= link_to "Istruzioni", instructions_path, :rel => "modal:open", :id => "#istruzioni_modal" %>

in the css I have:

istruzioni_modal { width: 700px; }

but the modal window is not resized.

Would be nice if the modal would show right away (with a spinner or something) to provide instant feedback to the user rather than it looking like nothing happened.

Is this doable while still keeping things nice and simple? Loving the simplicity of this lib, by the way :)

Here's a code change proposal to allow multiple modals to be opened at the same time (#101).

In short:

• the current variable is replaced by a modals array
• a new unique option is introduced, which determines if the new modal should be unique or not (i.e if existing modals should be closed or not). This option defaults to true, in order to keep backwards compatibility
• only one blocker is used for any number of modals
• the front modal gets the current class while the other ones get the behind class, thus allowing any styling for the modals in background

A test demo is visible here.

NB: if you're interested in this change, as well as the one suggested in #110, you might be interested by the merging result of those two, which I prepared as well (I needed it for a project).

Hi,

First of all thanks for sharing that plugin. It's light and functional, and that's all we need :)

The only blocking issue is the inability to scroll overflowing content (#69).

@alexgalli (#67) and @pawel-piskorz (#75) suggested two approaches to fix it, which both have the advantage of being simple and backward compatible. They also have some drawbacks:

• with #67, scrollbars may easily break the modal design
• with #75, scrolling the modal also scrolls the body behind

Here's a third approach, so that you can make your choice ;)

This approach is the one you've been described here. It works well with overflowing content, but it has the disadvantage to break a few things and thus, not to be backward compatible. Here's the list of changes:

1. .modal is wrapped inside .blocker
2. .modal is horizontally and vertically centered using CSS (cf. the ghost technique described here)
3. overflow: hidden is applied to the document body when the modal is displayed

Here are the consequences of those changes:

• .blocker can't be styled in JS only, because of the ghost technique. So it has to appear in the plugin stylesheet. Also, we can't apply opacity on it anymore, now that it contains the modal, so this has to be replaced with CSS rgba(). That also means we can drop the overlay and opacity options.
• since centering is performed using CSS instead of JS, the plugin will probably fail to work on IE<8. That also mean the center() method can be dropped.

If you decide to go with this solution, some extra cleanup should follow (mainly remove center(), overlay and opacity from the docs and the examples). I can take care of it if you need.

I ran into the same issue #33 was having. I was getting a grey, unclickable background but the modal wouldn't show.

The problem seems to be the name of the plugin because it runs into a naming conflict with Bootstrap! So I replaced every occurrence of the word "modal" with "jmodal" in the plugin and now it works as expected.

I suggest using another variable for the global namespace, since bootstrap is widely used.

P.S.: I opened a new issue so people using bootstrap will find the solution faster.

I have just started using this and everything was working fine, but then noticed the modal was showing on the page by default (right down the bottom); shouldn't the modal be hidden by default!?

This is caused by the display: inline-block; style in the .modal class.

I tried fiddling around a bit but nothing seems to work perfectly unless you set an inline-style for the element with the .modal class to display: none;.

This is a great modal script, but having to manually set an inline-style on every modal you have isn't so great.

Apologies if you don't have to do this and I'm doing something wrong here, but I checked your examples page and that's how you were doing it as well.

I know your intentions are to keep this as absolutely simple as possible, but I'd love the ability to add a custom class to the close button.

This way custom CSS can be written to override the default look for the close button, including the ability to utilize icon fonts. This is especially handy if they are already being used in the project at hand (which, for me, nowadays is almost always.)

This pull represents the simplest implementation of this feature that I could think of, leaving the styles completely up to the user.

An example has been added to the demo, and the README has been updated as well.

• Spinner is not optional for ajax requests.
• Spinner uses a css class .modal-spinner which by default adds a spinner background image but if you want to show text or HTML, you can use the $.modal.defaults.spinnerHtml option.
• If AJAX get request fails, the spinner is closed and the modal will not appear.

Triggering the modal via javascript is putting content behind the curtain (not in front as it was supposed to). This looks like a problem with z-indexs.

How can I fix this?

Hi, it is possible to add an option to fade in and fade out the modal instead of instantly showing and hiding it?

The instant show/hide is good for some scenarios but for others a 'transition' is better. To a lot of non-web people it take some time to figure out why all the screen is suddenly 'kind of black' and that a modal just opened. A 400 ms transition can fix this problem!

Thanks!

Hello,

I am trying to get the jQuery plugin select2 working correctly within a modal, however because I have the modal set to display: none to start with I need to reinitialize select2.

Let me note that it works fine if I don't hide the modal by default, but obviously you need to.

So I tried this code:

$('.modal').on('modal:open', function(e){

    $(e.target).find('select').select2('destroy').select2();

});

However it didn't seem to work; I can destroy it fine, so it's getting the instance, but it's failing to resize itself properly, which tells me the select is still hidden when it attempts to reinitialize - but this sppears to be the most relevant event for what I need to do?

Hi There,

Have been trying many things but can't get this event to fire?

Code:

$('iframe').on($.modal.BEFORE_CLOSE , function (event, modal) { var video = $("iframe").attr("src"); $("iframe").attr("src",""); $("iframe").attr("src",video); console.log('test'); });

Hello.

I am developing an application that uses Square to process user payments. In order to accomplish the payment processing my app displays a UI that my app obtains from the Square server, This Square UI takes the form of an iframe that allows the user to interact directly with the Square server in order to provide credit card information.

If I display the Square UI directly on my page then all is good. See the "SquarePaymentProcessing" screen shot.

However, if I display the Square UI in a jquery-modal popup then it does not render, even though the other elements that my application adds to the jquery-modal popup (such as the Submit Payment button) do appear properly. See the "SquarePaymentProcessingJqueryModal" screen shot wherein significant information is being displayed in the JavaScript Console (I added a red border to the Square UI).

If you folks cannot offer me any other help then at least please tell me this: Should I have an expectation that jquery-modal is capable of displaying an iframe?

Thank you for your consideration.

Hi, I need to know if there is way to close a specific modal pop up, by providing the html element id as an argument to $.modal.close()

Kindly help me with that!

Recently I was selecting some text on a modal and ended up with the mouse cursor outside the modal. To my surprise, this closed the modal! You can test this behavior on the first example on the jQuery modal website:

In my eyes this is an undesired behavior, and it could be easily fixed by changing the following code (line 100 on jquery.modal.js):

if (this.options.clickClose)
        this.$blocker.click(function(e) {
          if (e.target === this)
            $.modal.close();
        });

with something like this:

if (this.options.clickClose) {
    if (!this.$blocker.properties) {
        this.$blocker.properties = {};
    }
    this.$blocker.properties.mousedown = false;
    this.$blocker.off('mousedown').on('mousedown', function (e) {
        if (e.target === this){
            m.$blocker.properties.mousedown = true;
        }
    });
    this.$blocker.off('mouseup').on('mouseup', function (e) {
        if (e.target === this && m.$blocker.properties.mousedown) {
            $.modal.close();
        } else {
            m.$blocker.properties.mousedown = false;
        }
    });
}

My code isn't very elegant but does the trick.

When modals are opened using <a rel='modal:open'...>, they are removed from the DOM when the modal is closed. This does not happen is the modal is loaded via AJAX per the examples here.

// Open modal in AJAX callback
$('#manual-ajax').click(function(event) {
  event.preventDefault();
  this.blur(); // Manually remove focus from clicked link.
  $.get(this.href, function(html) {
    $(html).appendTo('body').modal();
  });
});

Please consider removing the modal from the DOM when it is closed the same way that it is removed when launched from a hyperlink.

I have fixed this and tested - will submit a PR, but not sure if this project still has active maintainers?