ghosh / micromodal Goto Github PK

Discovered this in Safari 9.1.2.

The reason is because the example code uses ES6 JavaScript template strings.

I think (hope) the modal will work in this Safari, but the demo itself is broken.

Use case - User wants to use micromodal to display a "We use cokies" message and don't want visitors to close the modal until they agree or disagree

Ref. https://twitter.com/imariohernandez/status/998704962212265984

Currently, it's not possible to pass a configuration object to programmatically opened modals.

Pass it in as the second argument.

Micromodal.show('modal-id', config)

MicroModal v0.1.1: ❗Please specify at least one 'micromodal-trigger' data attribute.  index.js:118
16:21:15.992 MicroModal v0.1.1: Example: <a href="#" data-micromodal-trigger="my-modal"></a>

I was curious if we could remove this from hitting logs every time there's a page without a modal on it?

If not, can we get a setting of some sort to set logging to false?

Thanks!

How to make the touch scroll working inside modal?
Thanks :)

The actual version on npm is 0.3.0 but the actual version of the package in the dist folder is:
var version = "0.2.1";

When the modal is opened and the arrow keys are pressed, the page behind the overlay scrolls.
This should not be the case as currently the modal is in focus and any form of user interaction shouldn't alter the state of anything other than the modal.
I would love to solve this issue

hey there, fantastic plugin! I was wondering is there any way to add any kind of mobile interactions? possibly a swipe to close action?

It would be really nice if this library provided a (set of) React component(s)

In package.json

I think main should provide the non ES6 version of micromodal (dist/micromodal.min.js). I have some errors bundling it with browserify.

Hi,

I'm doing this:

MicroModal.init({disableScroll: true});

But, the body is still scrolling.

How to debug?

Opening and displaying a dialog using javascript works correctly.

Can't close the dialog due to this.activeElement being null.

This line fails, this.activeElement.focus() in the closeModel function, causing the dialog to remain open.

Line 91

Object.assign(body.style, {overflow: 'initial', height: 'initial'})

means any height/overflow set by CSS is overriden when a modal configured with disableScroll closes. Why not removing these by setting them to an empty string?

It appears that when using body locking to disable scroll, when the modal is closed it does not unlock. I took a look at the source code and it appears that the library is using Object.assign for this functionality. I added a polyfill for Object.assign to see if that solved it, but it does not. I'll try to dive in more when I get a chance and create a PR if possible - but if anyone has any suggestions or thoughts that would be great. Thanks!

On mobile devices don't work verticall scroll and any actions with content in modal.
Problem in addEventListeners intercepts an event touchstart.

Hey, I've caught error, when tried to use this plugin.
Error trace

[00:54:01] 'javascript' errored after 1.85 s
[00:54:01] Error in plugin 'webpack-stream'
Message:
    ./~/micromodal/dist/micromodal.es.js
Module build failed: ReferenceError: Unknown plugin "external-helpers" specified in "/project/node_modules/micromodal/.babelrc" at 0, attempted to resolve relative to "/project/node_modules/micromodal"
    at /project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
    at Array.map (<anonymous>)
    at Function.normalisePlugins (/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at OptionManager.init (/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/project/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/project/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/project/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/project/node_modules/babel-loader/lib/index.js:46:20)
    at Object.module.exports (/project/node_modules/babel-loader/lib/index.js:163:20)
 @ ./src/assets/js/app.js 3:18-39
 @ multi ./src/assets/js/app.js
Details:
    domain: [object Object]
    domainThrown: true
[00:54:01] 'build' errored after 1.87 s
[00:54:01] 'default' errored after 1.87 s
[00:54:01] The following tasks did not complete: sass
[00:54:01] Did you forget to signal async completion?
[1]    57443 segmentation fault  npm run start

Gulp config https://gist.github.com/codev0/15dd75634e81a1ae0c59a2a5974c3c0b

devDependencies related to es6

"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.3.13",
"babel-register": "^6.7.2",
"webpack": "^2.6.1",
"webpack-stream": "^3.2.0",

Hello! You do good modal lib! How about add animation on close modal?

Hi! Thank you for the awesome project!

In my project I’m using hidden file inputs that are triggered when a button is clicked. File input element looks like this: <input class="uppy-Dashboard-input" hidden="true" aria-hidden="true" tabindex="-1" type="file" name="files[]" multiple="true" onchange={this.props.handleInputChange} ref={(input) => { this.input = input }} />, and it was included to the list of focusable nodes by micromodal. I fixed it by changing the input selector to omit hidden:

'input:not([disabled]):not([type="hidden"]):not([hidden])'

I’d like to send a PR, but thought I’d ask first, and also maybe there’s something else that needs to be changed. Add aria-hidden too? My input does have a tabindex="-1" and aria-hidden="true", but still gets treated as focusable, because it’s an input and not type="hidden".

I have a modal with a form and opening the modal is not a good experience on iPhones due to the first focusable node being focused automatically.

In portrait mode, you can see that a field has focus, but you can't see that the label of the field is "First name":

In landscape mode, you can't see that a field has focus:

It would be nice if setFocusToFirstNode was optional.

Try putting this in a modal:

<form action="/">
  <label for="test">Test</label>
  <input type="text" name="test" id="test" required>
  <button type="submit">Submit</button>
</form>

There are a couple problems that occur due to the fact that event.preventDefault() is in the onClick handler:

1. Clicking the label does nothing (it should move the focus to the input).
2. The form cannot be submitted. You can easily test this by simply leaving the field blank and clicking the "Submit" button. You'll see that nothing happens. I would expect the browser's built-in functionality to kick in and notify you that you left the field blank.

Hi, I can't make it work properly. It didn't close without css animations ("is-open" class is not removing).

I need just instantly show\hide a small window on my project (without animations and full page overlays).

Here is example on CodePen.

I'd like to temporarily prevent the user from closing the modal by clicking the overlay. Is this possible?

Also, is there a way for me to open a modal while a previous modal is already open and have the previous one close? I tried to loop through all but the current .modal.is-open elements and .close() them from inside the openTrigger callback but wasn't successful:

onShow: function (modal) {
    let openModals = document.querySelectorAll('.modal.is-open');
    const openModalsCount = openModals.length;
    for (let i = 0; i < openModalsCount; i++) {
        if (openModals[i].id === modal.id) {
            return;
        }
        MicroModal.close(modal.id);
    }
}

Cannot read property 'closeModal' of null

Thanks :)

Using html and css from gist
Demo

I need this because I use your project as a git submodule and I want to pin your project at 0.3.1 (for now).

Until then I'll pin to a commit.

Hello!

I am using shadow DOM, and if my modal is hidden inside it, document.getElementById('id-of-shadowed-element') can't select my modal.

I think, it would be handy to have the ability to pass not only id of element, but the element itself in options.targetModal.

Example:

const el = document.querySelector('my-component');
MicroModal.show(el);

I'm trying to use it with Bootstrap, but when I'm trying to import bootstrap.css file, it stop working.
I tried both CDN and local. Besides I've changed the order of css files in html, but nothing changed.

Here is codes

I just wrestled with a bug for the last hour where I was getting non-es5 code in my Webpack bundle. Turns out I was getting the ES module version of this library when I had this in my code:

import MicroModal from 'micromodal';

I was able to fix it by changing to:

import MicroModal from 'micromodal/dist/micromodal';

Is there something wrong in the package.json or am I just doing something wrong with my webpack or babel setup maybe?

I have a case where I need to trigger a modal from inside another modal to be placed on top temporarily.

current:
#mymodal > #other-modal-trigger

but #other-modal comes to view UNDER #mymodal

From what i can understand so far, any modal opened by trigger cannot be closed by javascript function close().

One of the problem is... as specified in https://micromodal.now.sh, function close(id) is available, however in the codes, close function does not take in any parameter. Instead it closes whichever modal is in variable activeModal.

The underlying issue is that activeModal is not set when the modal is opened using the trigger data-micromodal-trigger="modal-1". It is only triggered when modal is opened by calling show().

Let's stop using minifier as it is deprecated. We should be able to replace this using uglify.

After opening the modal, the intro says about accessibility and try hitting tab key. It's not working as expected in Safari

We have HTML content that's added to the page dynamically. It would be nice to initialize modals for just this tree of elements. We could initialize the entire document again, but doesn't that add multiple triggers ( triggerMap[targetModal].push(trigger); )?

Would something like this work?

old - var triggers = [].concat(toConsumableArray(document.querySelectorAll('[' + options.openTrigger + ']')));
new - var triggers = [].concat(toConsumableArray(document.querySelectorAll(options.openTriggerQuery)));

Micromodal.init({openTriggerQuery: '#newstuff * [data-micromodal-trigger]'})

or maybe this
var triggers = [].concat(toConsumableArray(document.querySelectorAll(options.root + '[' + options.openTrigger + ']'));

Hey guys , while developing the plugin , do you guys directly import the index.js file from the src directory and work on it in the latest chrome ? i believe, if your developing a plugin , you want to see how your source code work instead of your compiled code , so how do you go about having the index.js written in ES6 work in any modern browser ?

Any insights on this would be highly appreciated.

Thank you.

activeModal variable is only filled by "manualy" opening and closing modals (Micromodal.show(), Micromodal.close()).

Thus, when a dialog is opened with a trigger, calling Micromodal.hide() throws.

Hello,

Thank you for this awesome plugin.

In real projects i have a video / newsletter / ... modals, and they have custom onClose functions.
Can you please adjust it to return an instance with .show() / .close() options if is initialised with a custom target?

const instance = MicroModal.init({ targetModal: customTargetId, onClose: md => {}, onShow: md => {} }); instance.show();

Thanks in advance,
Erol

The forEach gives an error in Edge and FF.

SCRIPT438: Object doesn't support property or method 'forEach'

why is there that blue mark on closing cross, after opening?
can that be removed?

Hello!

I noticed when using, for example, MicroModal.show('foo'); callbacks written for the 'onClose' or 'onShow' event in the MicroModal.init function, don't fire... am I missing something?

I have tried programmatically opening a modal not seeing the console.log function fire, then when just clicking on the element with the 'data-micromodal-trigger' attribute it does work.

Thanks for reading and great work!

Need an API to close open modals programmatically.

Add a close method.

Micromodal.close('modal-id');

cannot close or open modal by using Micromodal module in React

MicroModal.close(modal.id);

For more flexibility

The original event that triggers the opening and closing of the modal is not passed to the onShow or onClose function. This is useful information for my project (ie. need to read a data-attribute on the link that opened the modal) so I added the functionality to my repo in this commit: pomartel@daf4a43

I can bundle this in a clean pull request if it can be useful to others.

Hello! I was asked via Twitter for feedback on the modal here, so here we go.

A few things stick out to me, mostly low to medium severity. For the majority, the expected functionality and accessible experience is all there, so kudos for that! I also really like how things have been documented with HTML comments then corresponding numbered bullets below; very easy to read and follow.

A few things I'd recommend:

1. Remove aria-describedby as this will announce the entirety of the modal content upon launch. It's just a lot of content to take in and could overwhelm some people with too much info all at once. Imagine if there was a modal for something like a privacy policy or terms of use…

2. Remove role="document" as this is the default role and is not required to be specified. Will also result in one less required div!

3. Recommend to change the h3 to an h2 as often modal content represents a major section within the page. It's a much safer heading level to use as there should be an h1 present above in the current document, then the h2 for the next major section. h3 assumes a preceding h2 and that can't really be guaranteed.

4. I've never seen aria-controls used in this manner before. I guess technically it's ok, but not required.

5. I suppose I see the reason for the role="document" now that I spot the use of header and main elements. I'd recommend not having these as well, especially the main as there should only be one and it's likely already in use in the document below the modal window.

6. People can still get to the content "below" the modal window using other means such as the VoiceOver cursor (Ctrl + Opt + right or left arrows) which is not ideal. To get around this, I recommend using the inert attribute. This is something new that doesn't exist yet in browsers, so here's the inert polyfill and related video explaining the inert polyfill it in more detail.

Again, these are minor nit-pick type things, but worth looking into and considering. Either way, nice work! 👍

• Basic demo feature tests
• Form action tests
• disableScrolling tests
• callback tests

Hi,

Within the documentation MicroModal.close is documented that it takes a string for the ID of the modal is should perform the close on. Yet, within the code, the close function disregards this argument and calls activeModal.closeModal();

Would be is possible to allow MicroModal.close to accept an ID selector and close the modal where the ID matches?

Thanks for developing and sharing micromodal. Very easy to configure.

The only setback for me, it doesn't appear to work with any version of Explorer, at least on my MAMP setup (is OK with Edge). Is there a way to make it function with IE?

Hi guys,
Thanks for this awesome library!

I just want to tell you I'm using Micromodal on my recent released project (Popup Notices for WooCommerce):
https://wordpress.org/plugins/popup-notices-for-woocommerce/

It's a plugin for WooCommerce that replaces notices by modals.
I don't know if you are familiar with WordPress but anyway thanks!

I added Micromodal credits there.
I hope my project can help someone here too :)

See you

Hi there!

Our company is using micromodal for popups and we are using Vue + TypeScript so it would be nice if we could get some @types added for better TypeScript support as right now we get a bunch of errors from our IDEs. It's worth noting it works fine, it's just the IDE doesn't know what to do with it.

Getting them added to DefinitelyTyped would give the plugin more visibility too.