zewish / rmodal.js Goto Github PK

The title say that doesn't have dependencies. But, I need bootstrap and animate to work?

Have you considered using the standard <dialog> element as a base? It is already supported in Blink-based browsers.

Hi, I recently went from Bootstrap modals to rmodal because I didn’t like Bootstrap’s bloated CSS, and I like rmodal a lot, but noticed an issue that doesn’t happen with Bootstrap modals : when you for example pin the web browser window to one half of the screen, or when you zoom, with Bootstrap the modals have a maximal width that doesn’t overflow the viewport, whereas with rmodal, the modals may easily become too large and the right part of their content is then invisible (there is no horizontal scroll bar either)

I am writing a native javascript module for Bootstrap modal and I am reading your code and came to thinking.. instead of some unwanted and mostly unnecessary scripting for focusing text inputs or other stuff, why not have a perfect replacement for Bootstrap modal?

I have a script which dynamically loads rmodal.min.js on my clients' websites and then tries to show a popup as usual.

It looks somewhat like this:

(function() {
    // this piece loads rmodal.min.js
    var d = document, g = d.createElement('script');
    g.type = 'text/javascript'; g.async = false; g.defer = true; g.src = 'somepath/rmodal.min.js';
    d.head.appendChild(g);

    // this piece waits for the script to load and creates a popup
    g.onload = function() {
        var popup = new RModal(document.getElementById('myPopup'));
        popup.open();
    };
}();

Usually it works very well. However, I encountered a website that uses RequireJS v2.1.2 library. RModal detects this and tries to load itself using "define" function. Obviously it fails somehow, since then I get an JS error when trying to create a popup (or just check for the RModal in the console):

ReferenceError: RModal is not defined

The method of loading the script is not an issue, it might as well be static <script> tag in HEAD. I even tried manually running the whole rmodal.min.js script through browser's console.

If I simply comment the lines in rmodal.min.js that are responsible for define/AMD support, everything works fine, since initialization is done using default fallback method. I'm talking about these lines of code:

typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.RModal = factory());

Am I doing something wrong here? Is it an error to expect that RModal / window.RModal object will be defined no matter how the library was initialized?
I'm not familiar with RequireJS and have no need for it - it was a random interaction between my script and other scripts on client's website.

I'd rather not make changes in rmodal.min.js (since it is an external library), so maybe there's some workaround?

When the modal is displayed, keyboard focus should move either to the dialog element itself or to the first form control.

While the modal is displayed, the user can still interact with elements behind the modal using the keyboard.

You can use the files field to specify only the dist files https://docs.npmjs.com/files/package.json#files

Hi everyone. I would like to first thank you for the awesome work you put into this lightweight modal plugin. It's very versatile (for me at least) and I love how it integrates with animate.css.

I found a problem - when use dialogOpenClass: 'animated zoomIn' and then you use dialogCloseClass: 'animated zoomOut', everything works fine. But when you try to open the modal again, the modal doesn't show up because the old classes still remain for those elements - in this case, fadeIn and fadeOut still exists, as you can see via Inspect Element.

Here is an example: http://next.plnkr.co/edit/1xszc0nNrAsPLm7G
Click on "Show modal" and then click on "Close". Then try to to click on "Show modal" again and you will see that the modal doesn't actually show up. If you inspect the element, you can see that the old animate classes are still there.

In rmodal version 1.0.28, the margin property in .modal .modal-dialog in the file rmodal-no-bootstrap.css is duplicated :

.modal .modal-dialog {
    position: relative;
    margin: 30px auto;
    …
    margin: 0 auto;
}

http://plnkr.co/edit/XXFKwHHcZD4Ecjh8twaW?p=preview — official demo

1. Uncomment line 41 (dialogClass)
2. Uncaught TypeError: Cannot read property 'innerHTML' of null

:(

It would be awesome with TypeScript definition files for this project!

There are not any style files in dist. Version 1.0.37

Hi! The link to the Plunker demo in the README.md seems to be wrong. Also in https://rmodal.js.org/

Thanks!

I'm using this options in demo:

, dialogOpenClass: 'animated fadeIn'
, dialogCloseClass: 'animated fadeOut'

After a first fadeOut , then next dialog open fades in then immediately fades out!

Awesome plugin, is really annoying using powerful libs just to popup a simple modal.

That said, I missed that default interaction to click outside the modal and close it. For some users, that is a default behavior. After that, probably a perfect modal lib.

Keep the good job.

And how actually you send data from the form in the modal to the caller.

I had a misfortune of integrating a popup engine which uses RModal.js with a webpage that uses Prototype.js v1.7 (part of some Magento installation).

Trying to open a popup, e.g. like this:

var p = new RModal(...options here...);
p.open();

results in an exception:

TypeError: this.each is not a function prototype.js:883:5
findAll prototype.js:883:5
s.prototype.elements rmodal.min.js:1:2369
s.prototype.focus rmodal.min.js:1:2585
s.prototype._doOpen rmodal.min.js:1:1537
s.prototype.open rmodal.min.js:1:1227

The popup itself is displayed, but the code breaks here, e.g. "afterOpen" callback is not executed.

I've tracked the problem down to this line in RModal.js, function RModal.prototype.elements:

return [].filter.call(

It seems that Prototype.js substitutes "filter" function with its own "findAll" function which does not work correctly in this context (it tries to iterate over "NodeList" object and fails).

Every RModal popup with "focus=true" option is affected.

I know this is not RModal issue but rather a problem with extremely invasive Prototype.js library.
But maybe there is some walkaround you could suggest?

Maybe the code could be patched up to avoid using "filter" method and be more prototype-friendly? I can modify the popup engine, but I cannot modify the website.

Disabling the focus should obviously work, but that's a feature and I'd like to keep it :)

This is strange....

In order to reproduce the problem, you can use this code:

< div class="modal" > < select >< option >Hello< /option >< /select > < /div >

The page will be rendered a (you will need to see this in Firebug, because when viewing page source, the code above will be displayed)

< div class="modal" > < select >< /select > < /div >

If I comment JavaScript instruction that converts the DIV into RModal out, the SELECT option appears. It is strange, isn't it?

If you does not comment the JavaScript out, but change the "display" attribute to "block", so that the dialog appears initially visible, the option is shown too.

Please check it.

EDIT:

When the page loads, and see the source with Firebug, the option is still there, but, when modal is shown, using open() method, all options are gone.

Thanks

Would be nice to have the possibility to close the modal window on click outside

The call to afterClose happens immediately regardless of closeTimeout despite the documentation stating otherwise:

{
      closeTimeout: 500 // Time to wait (ms) before afterClose() is called
}

Hello,

I once had an issue with loading RModal on a website that uses RequireJS. That has since been fixed (see issue #22).

However, I encountered a website which, apparently, has a broken RequireJS configuration. Simply calling "require.config()" results in an error:

Error: Mismatched anonymous define() module

it follows with the problematic function code which is unimportant here, because I have no way to fix it (website belongs to 3rd party). At this point, my code is not even present on the website.

How can I make RModal ignore RequireJS (since it is obviously broken) and load itself the regular way?

If the dialog is shown over the top of a form, then using Tab or Shift-Tab and the focus shifts away from the dialog and to an input on the form (so escaping the modality).

The most workable solution I have seen around this is to (A) insert dummy elements at the top and bottom of the modal dialog, and when a focus event occurs on the dummy elements, shift the focus back to an input inside the dialog. Also ideally (B) need dummy focusable elements at the beginning and end of the body so that tabbing away from the location bar and into the document can catch the focus shifting before the user tabs into inputs behind the modal dialog. I remember dojo had a traptabs() function that implements (A) see https://www.google.com/#q=dialog.js%20dojo%20traptabs

I have seen modal forms trying to disable all tabbable controls, but that is a fragile solution: firstly it is difficult to find all elements that can be tabbed into (inputs/textareas/anchors/buttons/scrollable-divs/tabindex=x/content-editable/video etc), and secondly it is difficult to avoid introducing subtle interaction bugs with existing code behind the modal dialog (setting or restoring element state like disabled/readonly/tabindex can lose state or otherwise stuff up).

You can see the fault in your plunker example - click Show Modal and type Tab three times, or click Show Modal and type Shift Tab.