In IE8 the outer of the modal (which is clickable for "close modal") action is always active. This breaks nearly the whole site interactions.

Is there a way to open the model on page load instead of by clicking a link?

(this isn't an "issue" but I'm not sure how to post a question, sorry if I broke protocol)

Since the modal reverts to a cropped window with a scrollbar in IE8, I suggest doing the following:

// Content Area
.modal-inner {
    .lt-ie9 & {
        background: transparent;
        height: 100%;
    }
}

.modal-content {
    .lt-ie9 & {
        overflow: visible;
    }
}

This looks a bit cleaner by removing the cropped window and scrollbar. Also another suggestion would be to increase the transparency for the base64 data URI with the IE8 overlay. Gives a bit more contrast for the content.

A bit of a bummer with the IE class names as it assumes you have conditional tags around the HTML tag.

Oh and here is the new data URI for the IE8 overlay. 90% alpha channel.

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAFo9M/3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkQ1MjlFRTc5MEVBMzExRTM4RTJGOUYxNjgwODA3RDA3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkQ1MjlFRTdBMEVBMzExRTM4RTJGOUYxNjgwODA3RDA3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RDUyOUVFNzcwRUEzMTFFMzhFMkY5RjE2ODA4MDdEMDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RDUyOUVFNzgwRUEzMTFFMzhFMkY5RjE2ODA4MDdEMDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz69n3R4AAAARUlEQVR42mJkYGB4BsQMTAxQABBAjBgiAAEEF4EBJgY0ABBAhFUQFgAIIAwzCOqgvgKAABoMbhgMCgACjGA4jBowIgwAAOMoDMMrMcsSAAAAAElFTkSuQmCC);

See example: https://www.evernote.com/shard/s54/sh/a9e28f5c-a247-450d-a519-c74b2740b5d3/1ac0867ab5a6ab6eb2192a66c9b0db8a

The modal on my website doesn´t show up in IE10!

Here´s my code:

<a href="#twitter" class="topButton call-modal" title="Show my Twitter feed"><span class="icon-twitter"></span></a>

<figure class="semantic-content" id="twitter" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-inner">
        <div class="modal-content"><a class="twitter-timeline" height="500" href="https://twitter.com/anselm_urban" data-widget-id="280297923747647489">@anselm_urban´s tweets</a></div>
    </div>
    <a href="#!" class="modal-close" data-dismiss="modal">×</a>
</figure>

Update: works with JS.

The ESC-Key method (JS) to close a modal prevents loading other modal images in IE9. Means you call one modal with an image included, close this via ESC-Key. Then open another one with an image inside and the image is not loaded anymore.
Maybe it needs preventDefault?

This article helps.

Do z-index values as variable which can be set by user. This gives an easy possibility to users of the modal to set the z-index properly and not always set it to the maximum values.

In Opera the modal close button is active also when modal is not opened. This leads to serious page navigation problems in some cases as the whole content outside of .modal-inner is triggered for modal-close.

A z-index value of 999 should cover a lot of cases but is still not the ideal value to apply. Z-Index should be determined via JS if available.

When you click on one of the examples on the demo page the page jumps to the top.
That's not optimal since you have to scroll back down, once you dismiss the modal.

The website is now in gh-pages exclusively.
We need to update and represent the latest changes of the repo in a good way. One big feature is stackable modal. Also the LESS branch needs some attention.

It is necessary to add more documentation on how the events work and how they get fired.

Please see #62.

The Sass-Mixins library is nice but it's an overhead for this project.

Scrolling in modals is not working on Android 2.3. The same issue appears on iOS 4.2 (which isn't really a problem at the moment). Maybe it is possible to work around this issue using JavaScript.

As it stands now, one can only have one modal at a time. How about lifting this limit once JS is available?

inner scrolling of images (image higher than modal container) is buggy: When scrolling down in Firefox (stable, v17) the image turns black. Scrolling up it shows up again.

Can show you a video if needed.

Should be high, since a lot of people will use z-index on their page, which might be conflicting.

cc: @anselmh

I would love to use this modal on my site, but I need it to load on page load instead of when someone clicks a link. Is this possible? I have tried using JQuery to simulate a click but that didn't work.

Thanks! Great work on the project.

Currently we use document.createEvent which is the old way to trigger events. The new way is something like this:

var elem = document.getElementById('myForm');
var event = new Event('submit');
elem.dispatchEvent(event);

The body behind the modal scrolls when scrolling the contents of the modal.

iOS 6.1.4

My suggestion would be to decouple visibility of the modal from the hash once JS is available - reason being that this leaves the page's author with the possibility of using the hash as a means of navigation through his site (be it hashbang based or not).

This would also open ways to stack multiple modals on top of each other.

README.md mostly

If one modal is opened and you want to open another modal (later maybe stackable modals) Internet Explorer in all versions does not interpret the hash change correctly and closes the current modal without opening the new one.
IE8 doesn't even close the current modal.

Hi guys,

I'd like to submit an update request. I'm experiencing a bug when trying to "load" or "use" multiple modal boxes with different YouTube iFrame's each (one vid for each modal).

However, when I click for instance in modal 1, and then close it (with or without having played the video), and then click to open modal 2 (containing another video), the same video that was on modal one shows up. BUT if I refresh the page, and open modal 2 first, then that video will show up in modal 1 instead.

Don't understand what's going on... I'm anyways no jQuery expert so... I'd love to know if anyone knows how to fix this.

Thanks a lot,
Santiago Baigorria

As the term "accessible" is being used here, it's worth noting that ideally the modal should handle keyboard navigation a bit better - if it acts as a true modal, users that navigate via keyboard should, after opening the modal, only be able to tab/shift+tab through the links/elements of the modal itself until it's closed. this will require some additional JS to set initial focus into the modal, make sure that focus stays/cycles within the modal itself, and is returned back to the main page after the modal is closed.

The desktop version of the modal can have some different styles on how to show the modal. Currently we only have fade-in.

Here's a list of cool effects we could or already have implemented:

• fade in & scale
• slide in from top
• slide in from top bouncing
• slide in from top and shake the window
• zoomOut
• plain screen / full screen
• blur: for this we would need to refactor the CSS selectors and extends.
• make way (more in a Avgrund way): for this we would need to refactor the CSS selectors and extends.

This could be more of a add on to the plugin rater than a must have.

If anyone is fancy on implementing some of these please ping in the issue.

I'd like to see support for loading content via AJAX. My usecase is that I have a list of items, and I'd like to open / view an item in a modal. It's not feasible to include the markup for every modal in the DOM, since this would be too much content.

Very nice module btw :)

Is anything meant to happen on the demo with pictures - A slideshow, or perhaps the thumbnails are clickable? For me the modal opens and I see the main pic with thumbnails underneath, but nothing else happens.

I'm on OS X 10.8.3 and Chrome 26.0.1410.65.

Good works guys, have used this in two web projects already.

Looking through the css and made some adjustment but it doesnt seem to work....how do one increase the height of the modal windows? the .modal-content if you will.

Thanks.

is possible translate the button "close" in mobile version?

This is weird. Firefox moves the whole body to right a little bit when opening the modal or when it's open.

When using fixed (position: fixed) elements on a page in connection with the hardware accelerated modal, the fixed elements are likely to break.
This problem only occurs in Webkit browsers. This does not happen on iOS, Android not tested yet.

There are two possible solutions:

1. Media Query for hardware accelerated transitions. This is not clean as desktop-browsers might match these anyway.
2. Using -webkit-transform-style: preserve-3d (maybe in connection with -webkit-backface-visibility: visible).

This needs to be researched further.

1. Ability to handle sizing adjustments when viewport is resized upwards.
2. Ability to handle multiple sizes instead of a global size set by a variable.

:)

I am testing the modal in IE8 and it will not show videos, does anyone have a workaround?

I'm trying to call a custom function to stop my html5 video player but I don't know how to use the cssmodal:hide event.

I'm using jQuery. Can somebody help me?
Thanks in advance.

When I open a modal then click on an image and close it--the last image I clicked on shows up in the next modal window.
I am using Zurb foundation.
here is a link to the test page: http://skwebworks.com/
thank you for your time. Sandra K

Since is coming to HTML 5.1 it might be good idea to swap

I don't see a transition happening when the modal opens on IE10. I suspect it's the same problem described here:

http://stackoverflow.com/questions/17576236/ie10-win-7-ignores-css-keyframes-when-within-a-media-query

The transition is inside a media query, and that's the only thing I can think of that would cause it not to work.

I can see all close links/buttons being set to aria-hidden. If the following definition is correct...

Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author.

http://blog.paciellogroup.com/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/

...then a user with screenreader will never get to see these links/buttons and therefore will not be able to close the modal, right?

Hello

I was wondering how can I open a modal box in javascript code. So I want it to open not a a click event but on a manually triggered event.

I want to perform an ajax in the

$.ajax({
        url: "basket.php?action=add&"+values,
        cache: false,
        method: "GET",
        async: false,
        complete: function(request) {
            // FIRE EVENT TO OPEN MODAL BOX 
                        //

            return false;
        }
    });

    return false;
}

how can I do this ?

Thanks in advance

Hi!

The video demo doesn't work on my latest Firefox (Linux) but still works on my Chromium (Linux).

According to the browserstack screenshots, the video is not loaded for Firefox on the other platforms either (Windows, Mac) and seems to be broken on Opera too.

Cheers,
Thomas.

Every time you activate a modal, the page jumps down.

iOS 6.1.4

Although it is nice to have that extra a11y piece in place I would suggest setting aria-labelledby and the corresponding id on a dialog's header part via JavaScript.

Why? I expect most people to copy & paste dialog code and to forget to adjust id and aria attributes accordingly. Also I suspect most users of your modal lib will not have the background needed to identify this problem.

By moving this part to JS you ensure a much better a11y across the board.

Love this, but one problem I have is bower. Bower is very powerful, but for things u really won't touch.

Tried using this project on bower, but wanted to change a whole load of stuff. Padding on the inner modal div, border color, width, breakpoints etc.

Maybe one of these days we can actually take advantage of a better package mgt. system. I just don't think we are there yet with them.

Can't get modal window to fit safari/iphone5 (jumps to bottom of window and doesn't re-size) - any tips really welcome...
Works so well in everything else.

Hi guys,

My suggestion is to remove the <header> and the <footer> tags from the modal's markup.

I'm more supporter of the view that specific markup for a webpage should be reserved for their real use, and not miss-use it as in the modal's case.

I don't like there to be several headers and footer on a same page. I believe the <header> and <footer> tags should be reserved for the page's logo, navigation, any footer content, footer navigation and copyright information.

That's all. I believe that for a more beautiful markup and and other SEO matters if these exist, I'd rather remove the mentioned tags.

Thanks a lot,
Santiago

The LESS version needs to get all the latest changes from the repository and the stuff that is in the branch wip-1.1.0.

/cc: @4nduril