humaan / modaal Goto Github PK

When a modal opens, if the first action you perform is to press shift+tab (i.e. previous link), it escapes the modal and focuses the first background link.

If your first action is to press tab, then you hit shift+tab twice, it doesn't then escape modal, so my guess is we're doing something when tab is pressed to restrict the focus, but we're not doing the same action on shift+tab.

The SASS variables are really handy.
I think the close hover color is the color I find myself changing the most (yet it isn't set as a SASS variable).

A few things that could be improved on for mobile compatibility:

1. White close button is hidden when you scroll the modal on a small screen.
2. Back button on Android could/should close modal.

The first could be solved with mediaquery style change.

The second would require some form of location.hash change when the modal is open. That way the back button would remove it, and you could catch that change and close the modal.

Hi,
It's not modal for screenreaders yet. You can navigate the page behind the dialog. A possible solution is hiding all other content on the page for screenreaders when the modal is active, using aria-hidden="true". This makes everything invisible except the dialog, creating a keyboard trap. Example http://a11y.nicolas-hoffmann.net/modal/.

"Currently Modaal only supports a close method which can be called like so."
Why does it only support close instead of supporting open & close ? open method is useful when we want to trigger the modaal's open programatically

Any chance of adding support for swipe gestures on the image gallery, pinch and zoom etc.

Swipebox does this which is nice, but they fall short in other areas.
http://brutaldesign.github.io/swipebox/

I am trying the initialize the fileupload like

$('.modal_selector').modaal({
        after_open: function () {
            $('.image_selector').fileupload();
        }
    });

but is not working and throwing
cannot call methods on fileupload prior to initialization; attempted to call method 'option' error in console.

Using table layout comes with certain limitations, especially at extreme edge cases of viewport sizes/aspect ratios; e.g., the caption box is currently hidden if the viewport is too short vertically.

Using flexbox will make it easier to adapt to a wider range of viewport sizes/aspect ratios moving forward.

I could not find a way to submit POST values to the modal. Is there an option planned for this?

Thanks for this very promissing modal plugin.

Using the modaal for showing instagram popups, everything still works but this error appears in the console: Uncaught TypeError: Cannot read property 'Embeds' of undefined

Refers to line 151:
window.instgrm.Embeds.process())

I think :-)

Right now there I see only an option for rel="gallery" in one type: image or video. If I add a video to an image gallery, there is in tag on the video link, and no iframe. Is there a way to for inner navigation to image and video gallery combined? Thank you!

Firstly, thanks for a great plugin. The simplicity is certainly welcomed and refreshing.

On to my question... is there a way to auto play videos on open of Modaal? Specifically looking for Vimeo but I guess both YouTube and Vimeo would be helpful.

Scrolling on mobile devices should have a momentum.
In order to achieve so .modaal-wrapper should have:

overflow-y: scroll;
webkit-overflow-scrolling: touch;

Short article about this: https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

I'm going to make a PR later.

Not sure if this is a bug, but when you use the inline method -- which works awesome -- and then close the modal window, that element you launched is removed or hidden from the DOM.

Is there a way to avoid that?

I tried doing a callback function to set the CSS on the element to 'block', but that didn't work.

Looking at your code, I don't really see why you're using JQuery. You could easily remove this dependency by replacing it with native JavaScript calls.

e.g.
var dom = document.body;
var element = document.querySelector('.class-name');
if(element.classList.contains('class-name') {};
element.addEventListener('click|keydown', function);
etc.

There's two minor markup changes that I've discovered need resolving:

1. There is duplicate iframe markup for .modaal-content which needs to be resolved.
2. With the new width and height updates in #27 being applied to the outer .modaal-container, we should simplify the JS and set the iframe elements width/height to 100% to fill it's parent element. This will also allow it to become responsive by using max-width instead of width on the iframe element itself.

Why this needs jQuery? Why do I need to load full jQuery lib just be able to use it? It doesn't seem justifiable in 2016

See ticket #33 for some background. In short, this JS Fiddle example (https://jsfiddle.net/mouvcbgq/) fails in part because Modaal is being loaded in a body onload event, and internally Modaal calls $.fn.modaal in its onload event before $.fn.modaal is declared (due to the order in the source code).

As such, it'd be good to review/revise any onload related events in Modaal so that the library can be included at any stage after jQuery is loaded, and it'll just work. For one thing, this will make JSFiddle examples easier as most people won't know to change the JavaScript On Load setting in JSFiddle (and shouldn't be expected to).

Hey, first off - thanks for a superb solution for modals.

I have a modaal that has a Vimeo (YouTube is also useful) video that autoplays when you open it. Though once it's stopped playing you have to manually close the modaal.

Is it possible to make it so the modaal closes automatically once the video ends? It would be a very useful feature if not! I appreciate any help.

Thanks in advance.

When viewing the image gallery containing multiple images, I am able to use my arrow keys to navigate past the set of images available to get an empty carousel item page

Is there an option already built in to open the modal on page ready? I notice in the js file you have a section to look if there is only one modal on the page (on page load check if single '.modaal' exists) wondering if this is related. Thank you for the well done work.

We've tracked the issue down. There's some responsive CSS that hides image captions when the browser height is less than a certain value. However, because we target the label for focus when opening an image, the element isn't found and focus is left back on the page.

Will fix up shortly.

The modal has focus management but when it opens, nothing is announced in Voiceover. If you send focus instead to the element with role="dialog" and an aria-label, those will be announced when the dialog opens. Or you could send focus to the close button–I've heard of people doing it either way.

Here is a screenshot showing the wrapping dialog and DIV inside with tabindex="0":

You could move tabindex to the dialog element and change its value to -1, that way it won't be in the explicit tab order.

You could look at the HTML5 dialog tag, as it will give much better symantics for assistive devices (or simply the browser) to use.

For example, when the dialog is "open" and "modal", supporting browsers will limit the focusable controls to those elements within the dialog (e.g. tabbing between elements won't focus anything else on the page, so you don't need to do anything in JS to fix that).

https://github.com/GoogleChrome/dialog-polyfill

https://developer.mozilla.org/en/docs/Web/HTML/Element/dialog

What browsers does Modaal actively support?

The overlay click/tap to close on mobile doesn't appear to be working in iOS.

Will retest android during fix.

I didn't find in the documentation to register the modal without a link. Is this possible? e.g: I want to trigger the modal when a div is clicked. I can't just use a tag, because the div contain some a tags.

Hello.
Thanks for plugin.

When I open modal window, my page jump in right direction for a half scrollbar width.
It happens because you block page by overflow: hidden; and original scrollbar disappear.
I think here is no choice but to remember scrollbar width and set suitable padding-right.
(check bootstrap modal for example)

When I close the window I see two of scrollbars: http://prntscr.com/b67niq
I think you should release page back to normal only after fade out animation is finished.
(check magnific popup for example)

If you guys work on MAC you probably see no scrollbars at all. There is an option in system settings to turn on scrollbars: http://prntscr.com/b67pgu

Open a Modaal slideshow, then shrink the vertical size of the browser so that it's shorter than the height of the image.

The image will be "squished" vertically.

acce911

Add ''overflow: hidden'' for body, in time open modal is bad, becouse its side effect for you independent module and you can break someone else's layout.

Hi,

First of all thank you for this awesome plugin.
I would like to know if you have information about IE Compatibility and compatibility for other browsers.
Thank you

Issue with scrollsbars

Where scrollbars are visible, like the demo page, the modal will make them disappear. This causes a jump on the content.

Tested on Chrome 50, Windows 10.

To reproduce:

1. Go to the demo site
2. Click 'View Example'
3. Behold, the scrollbar disappears!

Tabbing through slowly seems to maintain the tab scope to within the modal content and address bar but when I held down tab, it breaks out of the modal content and I can start tabbing through the main web content that should not be in focus.

Browser: Google Chrome 50.0.2661.75 m

I propose adding an event during the open call that can be used to determine whether the modal should open. As the logic behind the event would be performed in the event itself, rather than in Modaal, so this would increase the filesize by only a fraction.

Ideally it should take either a boolean value, or a closure to be called.

I can tackle this later during the week, pending @danhumaan's thoughts.

When calling content to the Modaal via AJAX, it would be really beneficial to specify a content area to use, rather than using the whole page and having to manually remove unnecessary markup.

jQuery supports this kind of function through it's .load function (a shorthand of .ajax)

$( "#result" ).load( "ajax/test.html #container" );

This allows the targeted page to be a 'complete' page, so if javascript fails or is disabled, or even if you wanted to disable the functionality of mobile for example, the user could still go to a legit page with regular markup (headers and footers etc...).

Love the Modaal by the way.

Due to max-width of 1500 on container.

The Inline Content example (and others) are actually wrong at the moment. E.g.

<a href="#inline" class="inline">Show</a>
<div id="inline">
        Inline content goes here...
</div>
JS$(".inline").modaal();

This is because this line in create_basic:
content = target.children().clone(true,true);

Should be:
content = target.contents().clone(true,true);

Otherwise we're not grabbing top-level text nodes. Need to review the other modal creation methods for the same issue too.

Until this is fixed, an example like the above will show an empty modal. You can get around that by wrapping "Inline content goes here..." with an element. E.g. div, span, p

I'm not sure how widespread this issue is on mobiles but I've noticed a couple of related issues:

• On iPhone 6, the background_scroll property is not having any affect. I.e. the background is scrollable even when set to false.
• Related to that, it's possible to push the overlay out of the way, like in the screenshot (thanks @lee-karolczak).

Experimenting with ideas here (http://stackoverflow.com/questions/9280258/prevent-body-scrolling-but-allow-overlay-scrolling) I was able to prevent the second issue (pushing the overlay), but the background was still scrolling.

I think fixing this might be a prerequisite to fixing #22 (scroll momentum on mobile).

I think it would be nice to be able to opt to display the clipped 'close' text on the close button.
Doing so may require that the before and after be positioned right rather than left.

I am not able to set width or height of the modal by both default as well as inline attribute method. I tried this:
<script type="text/javascript"> $('.modaal-inline').modaal({ type: 'inline', accessible_title: 'Modal title', width: '400', height: '200' }); </script>
and also this
<a href="#inline-content" data-modaal-type="inline" data-modaal-width="200px" data-modaal-accessible-title="Inline Dialog Window" data-modaal-overlay-opacity="0.4" class="modaal">Show Modaal</a>

Am I doing it wrong?

I cannot seem to get the is-locked option to work for me using the inline data-option-name method. Calling it through a jQuery call does work for me:

<script>
    jQuery( document ).ready(function() {
        jQuery('.modaal').modaal({
            is_locked: 'true'
        });
    });
</script>

Here is a jsfiddle where I am trying to get it working inline.

https://jsfiddle.net/bmcwebdev/mouvcbgq/

Thanks gang!

npm still installs v0.3.0

$ npm install modaal --save-dev                                                                                                         
[email protected] /vagrant                                                                                                                                 
└── [email protected]      

I think it would be nice to have possibility to install plugin via Bower and Npm package managers.

Hello,
First of all, thanks for your work. Nice to have a solution where accessibility is a key parameter.
I've started implementing Modaal on my website where the main language is Russian. And I found that the system messages like "Close" on the Close button seem not to be translatable. Ideally, this should be localizable at least in the configuration.
Any help would be highly appreciated. I could accomplish most of the work myself and send you a pull request, but first of all I would like to know how you want to proceed with it.
Thanks!

A minor thing code-wise but an immediate blocker for some keyboard users:
The demo page (http://www.humaan.com/modaal/) doesn't have any keyboard-focus styles.
The dialogues themselves do (which is great) but it is hard to tell which one you are opening on the demo page.

I think it would be a matter of adding :focus to the :hover styles (e.g. demo.scss line 133), so the visual effect is there for keyboard users as well.

There might be other places where it needs adding, but a search of 'hover' would probably find them.

Sorry, I'd fork it, change it, test it, and do a pull request, but by the time I've done that would be about 3 months from now!

on click with class ".video" set type property to "video"?

does it possible?

thanks

I notice you use .bind() for the keyboard events, but use .on() for the click events. Just wondering if there is something you've noticed about how the methods perform that made you decide to use the different methods?

Large images overflow the viewport when the viewport height is greater than 1024px. At smaller sizes the image more appropriately is maxed at a height of 85vh.

I see no reason why the img element shouldn't have a max-height (and max-width for that matter) of 85vh/vw at all viewport sizes.