A Better Twitter Bootstrap Modal

https://github.com/jschr/bootstrap-modal/

by dkroy • 14 years ago

358 71 14 years ago

github.com

aioprisan• 14 years ago

pull request into upstream?

ckluis• 14 years ago

Yeah if you believe it is truly better why not try and get it built into bootstrap?

latchkey5• 14 years ago

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.

lupin-binb• 14 years ago

Nice job.

hhaidar• 14 years ago

Good stuff. You need to get this into Bootstrap.

Thomvis• 14 years ago

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

charliesome• 14 years ago

Really slow on an iMac too.

foobarram• 14 years ago

Cool stuff. Will use it on my next project!

mikenereson• 14 years ago

Submission title is accurate.

mmhd2• 14 years ago

Overkill.

danek• 14 years ago

care to explain?

mmhd2• 14 years ago

Just read the comments above.

jbrooksuk• 14 years ago

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

Bootvis2• 14 years ago

This is sweet!

polarcuke• 14 years ago

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.

ralphleon2• 14 years ago

"Stackable"

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

latchkey5• 14 years ago

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...

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

ralphleon2• 14 years ago

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.

napoleond2• 14 years ago

It's a very common pattern in desktop software (complicated config panels, for instance). I don't think that makes it "good" but at least it's well understood. It's dumb that most existing modals can't do it.

kirillzubovsky3• 14 years ago

It's not dumb if it's broken. What's dumb is that current complicated desktop solutions (whichever you talk about) haven't figured out a better way.

Just because you can get away with doing something poorly, doesn't mean you should.

kirillzubovsky3• 14 years ago

I think it's a terrible UX the way it's presented, but there is definitely a use-case for the functionality.

Say you have a modal that contains a step-by-step process. Now you can load multiple modals, and dismiss them one at a time. To a user, it will look like s/he is moving through the steps.

Is this a good use? Ehh...maybe not, but it's possible. Just brainstorming here.

kevincennis• 14 years ago

Maybe they can't. But it's nice that the functionality exists so that I can make that decision for myself.

scorpion032• 14 years ago

It is a perfect use case for adding a newly created category to a post.

Similarly for adding any foreign key item which could be multiple levels.

Django admin does this now by opening a "new" in a different window.

Nrndr• 14 years ago

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

swohns• 14 years ago

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

davidtyleryork• 14 years ago

Upvote for Longcat :)

1qaz2wsx3edc• 14 years ago

It should have been longer.

kirillzubovsky3• 14 years ago

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• 14 years ago

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

Bootvis2• 14 years ago

I concur, it also works great in IE on Windows Phone.

atirip• 14 years ago

"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

sbochins• 14 years ago

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.

niftylettuce2• 14 years ago

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/

niftylettuce2• 14 years ago

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...

buzz27• 14 years ago

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.

cientifico• 14 years ago

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

nachteilig• 14 years ago

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.

teej2• 14 years ago

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.

latchkey5• 14 years ago

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. =)

darrenkopp• 14 years ago

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.

chewxy• 14 years ago

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)

conradfr2• 14 years ago

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

moe3• 14 years ago

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• 14 years ago

Is there even a way to avoid that?

pebb• 14 years ago

Not without heavy js code

harlanlewis• 14 years ago

Assuming your modal is an element lacking native focus (eg a div) and you're using jQuery:

modal.attr('tabindex','1').style('outline','0'); modal.focus();

That: 1 - enables focus on the modal div 2 - hides focus visual indicator on the modal (because it's not an interactive element, just a wrapper) 3 - sets focus on the modal

The user's next tab keypress will select the first focusable element inside the modal.

Restricting tab keypress to just elements inside the modal (ie cycling through only modal content) doesn't return significant benefit and it's a whole lot more work. It's easy for a user to error-correct by simply clicking back inside the modal, but it's hard for a developer to manage enabled/disabled states for native behavior.

the7nd• 14 years ago

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.

johnx123-up• 14 years ago

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• 14 years ago

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

jschr2• 14 years ago

1. Should already exist. See the 'Update' button for the ajax demo. 2. Is on my list :)

hayksaakian• 14 years ago

Laggy scrolling on galaxy nexus cm10

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

krichman2• 14 years ago

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.

trevorcreech• 14 years ago

Obviously auto-popup modals are bad, but modals are great for signup and login forms.

conradfr2• 14 years ago

Modal may not be great on public websites but they are essential on web apps.

And not everything is mobile web.

ed2092• 14 years ago

Why do you think that?

krichman2• 14 years ago

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.

yusw• 14 years ago

This is great! Thanks for sharing!

zoobert• 14 years ago

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.

geekam• 14 years ago

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.

WimLeers• 14 years ago

- Backwards compatible

- Responsive

- Stackable

- …

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

tjholowaychuk• 14 years ago

y u no backbone-bootstrap-modal?

A Better Twitter Bootstrap Modal

Related Stories