

A Better Twitter Bootstrap Modal - dkroy
https://github.com/jschr/bootstrap-modal/

======
krichman
This is a nice modal, but I'd much rather never have a modal ever. The only
time a modal should appear is if a critical error occurred that the user must
know about immediately. For most cases where modals tend to get used, like on
iOS "please rate us", or "we want your contact information now", I don't think
it is appropriate at all.

~~~
ed209
Why do you think that?

~~~
krichman
It's a forcible interruption of whatever the user is doing, and the user has
to interact with it before continuing. As such, it should be used only when
there is something that _needs_ attention immediately.

If it's used for collecting user info after they hit a signup button, that's
marginally acceptable, but they would still be unable to, for example, scroll
back up the page to double-check some info until they finished with it. So I
see popups like that as a failure of design; "I didn't know where to put this,
so, here. Modal."

What modals are actually used for in the majority of cases I've seen is making
modal popups begging first time visitors to register for websites and similar.
This task is neither urgent nor necessary (nor, in most cases, desirable) for
the users. Forcing them to interact with it before the rest of the page is
incredibly irritating, but that will never stop because it's more lucrative.

~~~
jonknee
> As such, it should be used only when there is something that needs attention
> immediately.

There are a _lot_ of times that this is the case, it's strange you'd prefer no
modal at all. I make backend web apps and modals are hugely valuable.
Creating/editing new objects, confirming actions, applying filters, etc etc.
I'd agree they have no place in informational web sites (like your favorite
news site), but the web is used for a lot more than informational websites.

------
darrenkopp
The first that I personally have seen so far that doesn't screw up when
zooming in on a mobile device (actually resizes and re-positions itself), so
great job! I'm sure there are others, but this one is now the best in my
opinion solely based on that regard.

------
sbochins
This is fantastic, I will definately be replacing my bootstrap modal code to
use your library. This would be great if this got committed into bootstrap.

~~~
niftylettuce
this isn't responsive on majority of current mobile browsers though...
<http://caniuse.com/css-fixed>

also see my other comment with regards to patching it for abs positioning

edit: current alternative is <http://fancyapps.com/fancybox/>

------
moe
It suffers from the same bug as the stock bootstrap modal; focus is not
contained in the popup window. Press tab a few times and soon your keyboard
focus is on elements on the page _behind_ the modal.

~~~
rhizome
Is there even a way to avoid that?

~~~
pebb
Not without heavy js code

~~~
moe
Well, I actually submitted a pull-request almost a year ago but it was
rejected for "complexity"...

I didn't understand that decision back then and I don't understand it today.
The patch weighs in at about 100 lines which doesn't seem heavy to me.
Especially when you consider that without the patch the bootstrap-"modal" _is
not a modal_...

Anyway, here's the fixed bootstrap-modal.js for the version that was current
back then:

<https://gist.github.com/0d04646ab6cf4df50610>

Line 23-82 is the important bit, that snippet is lifted nearly 1:1 from
jquery.ui.dialog which fixed this issue ages ago. Beyond that there's only a
couple lines of glue code.

Feel free to port this forward to the current version (or better-modal).
Personally I've stopped using the javascript parts of bootstrap because I
don't want to maintain forks for basic bugs like that.

~~~
pokoleo
You might want to change the language/syntax highlighting of that gist. That
apostrophe on line 120...

~~~
moe
Sorry, here's the same gist with proper syntax highlighting
<https://gist.github.com/bca7185d4cf0b71bd55b>

~~~
jschr
Thanks for this. Currently I have a workaround by using data-tabindex instead
of the standard tabindex but I've been trying to find a more robust solution
to this problem so I'm going to take a look at implementing something like
this.

------
atirip
"If you want to prevent the background page from scrolling (see demo for
example) you must wrap the page contents in a <div class="page-container">.
The reason for doing this instead of just simply setting overflow: hidden when
a modal is open is to avoid having the page shift as a result of the scrollbar
appearing/disappearing."

There's a solution available which avoids wrap and page shift too. Take a look
at: <https://github.com/atirip/bodyscrollkiller.js>

------
ralphleon
"Stackable"

After checking out the live demo, I have no idea how "stacking" modals could
make a good user interface.

~~~
latchkey
I have found one case where it makes sense. Say you have a modal popup with an
'editor' widget in it. If that widget then needs to popup another modal for
adding a link, it makes sense. Here is a screenshot of what I'm talking
about...

[http://www.evernote.com/shard/s178/sh/003f6b5e-0869-44af-
ab9...](http://www.evernote.com/shard/s178/sh/003f6b5e-0869-44af-
ab9e-bffb24b80bbb/04148adf547ffd7bd2111539970c05ce)

This is also using the bootstrap modal solution referenced in this article.
Redactor is the editor widget.

~~~
ralphleon
That's a pretty good example, but why is description even a modal? It looks so
content rich, seems like it deserves the full screen.

~~~
latchkey
True, I could resize the modal to be a lot larger, but it hasn't been a big
issue so far. I do like it in a modal because it allows me to enable/disable
the Save button depending on if things change (although this doesn't work now
that I've switched to Redactor since they don't support figuring out that info
yet... feature request has been submitted). All of my UX does editing of form
fields in a modal, for consistency, it is nice to keep things the same.

------
kirillzubovsky
You know what's really awesome about this Modal? Unlike built-in one, this one
works on iPhone without issues! Long window scrolls just fine. You just made
me so happy :) Definitely using in something I am currently working on.
Thanks!

~~~
joelhaasnoot
#1 reason I can't use websites on my phone? Modal dialogs that align
themselves "in the middle" and then proceed to be unclickable...

------
polarcuke
This is pretty awesome, I'm going to be using it for sure. As the title
suggests I definetly think it is much better than the standard bootstrap
modal. You should try to get this implemented into bootstrap. Good work.

------
johnx123-up
My wishlist

    
    
      1. Ajax loader inside the modal (load modal first)
      2. Pinterest like modal (aka modal with HTML5 history API / 
         hashchange / browser back button support)

~~~
extesy
Create feature requests for them: <https://github.com/jschr/bootstrap-
modal/issues>

------
aioprisan
pull request into upstream?

~~~
latchkey
I've been using this (as well as helping give feedback on it after I developed
my own and realized this one is better). This is by far a much better solution
because it handles responsive resizing, z-index and smaller devices a lot
better.

Issues have been opened referencing this modal and there has been no response
from @mdo or @fat on it other than to say that they were working on it
themselves for a future version.

------
Thomvis
It looks good, but the animation is really slow on an iPad 3

~~~
charliesome
Really slow on an iMac too.

------
Nrndr
Great job man. This needs to be added to stock bootstrap.

~~~
swohns
Totally agreed, nice work man. Thanks for sharing! We'll be using this.

------
zoobert
Great. Thanks for making it available freely. It will be very useful to build
desktop application with bootstrap and node-webkit or appjs for example.

------
niftylettuce
this isn't responsive and doesn't work on devices without support for fixed
positioning

you might want to take a look at grabbing what you can from my project for abs
positioning:

[http://niftylettuce.github.com/twitter-bootstrap-jquery-
plug...](http://niftylettuce.github.com/twitter-bootstrap-jquery-plugins/)

------
geekam
Nice. I'd remove the animation though. I think that animation is just
annoyance (even slight) in structures that do not require animation. That
extra few fractions of a second can mean a lot. That's why on Windows or OSX I
remove the animation to hide and show application windows.

------
davidtyleryork
Upvote for Longcat :)

~~~
1qaz2wsx3edc
It should have been longer.

------
jbrooksuk
I've been looking for a better modal for Bootstrap for a couple of days now,
this is perfect!

------
nachteilig
Definitely prefer this to the default modal, which blacks out the screen
around it. I'll have to run some tests to see if any version of IE can handle
this.

~~~
teej
Is it really worth installing an entirely new library just to achieve
something a simple line of CSS could do?

    
    
        .modal-background { background:white; }
    

For me, Twitter Bootstrap's components have been the right tradeoff between
flexibility and functionality. It doesn't have too many bells and whistles
which makes it way easier to integrate into my own code.

Maybe I just haven't run in to the use cases for Bootstrap's modal that causes
the pain that this fixes, but most of these "features" seem like "it would be
cool if..." product cruft.

~~~
latchkey
This is a drop-in replacement so that once you hit those use cases, you won't
have the pain others have already felt before you. =)

~~~
teej
I don't think it's safe to assume that a niche feature upgrade to a JS/CSS
framework is inherently bug-free across browsers.

~~~
latchkey
That isn't the question. The question is if jschr's modal implementation is
more (or less) bug free than bootstrap's. Based on my analysis and many
others, it is more bug free. Feel free to read through the issues.
<https://github.com/twitter/bootstrap/issues/search?q=modal>

------
the7nd
Wow. I was just having scrolling issues with Bootstrap's modal today and I
couldn't find any solutions I liked. This was a godsend. Thanks.

------
hhaidar
Good stuff. You need to get this into Bootstrap.

------
chewxy
This looks brilliant. Looks like I'll be using this for my next project (shame
it wasn't released in time for my previous one)

------
buzz27
Might just be me (FF17/Ubuntu) but it doesn't seem to be modal ... I tab
around and end up on elements outside the window.

------
WimLeers
\- Backwards compatible

\- Responsive

\- Stackable

\- …

Nice. But why isn't "Accessible" in that list?

------
hayksaakian
Laggy scrolling on galaxy nexus cm10

But I don't blame you, its probably just chrome 18 being ancient.

------
conradfr
Will try it, I often need a more size flexible modal than the stock one.

------
yusw
This is great! Thanks for sharing!

------
cientifico
stackable doesn't work. A doble click hides the second or next modal

------
tjholowaychuk
y u no backbone-bootstrap-modal?

------
lupin-binb
Nice job.

------
mikenereson
Submission title is accurate.

------
mmhd
Overkill.

~~~
danek
care to explain?

~~~
mmhd
Just read the comments above.

------
Bootvis
This is sweet!

------
foobarram
Cool stuff. Will use it on my next project!

