Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

A Better Twitter Bootstrap Modal

github.com

Post reply on HN
Print view View original

21–30 of 73 posts

Re: A Better Twitter Bootstrap Modal

#21

Post by kirillzubovsky »

napoleond wrote: post #19
ralphleon wrote: post #15

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

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.

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.

Re: A Better Twitter Bootstrap Modal

#23

Post by atirip »

"If you want to prevent the background page from scrolling (see demo for example) you must wrap the page contents in a . 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

Re: A Better Twitter Bootstrap Modal

#25

Post by ralphleon »

latchkey wrote: post #17
ralphleon wrote: post #15

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

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.

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.

Re: A Better Twitter Bootstrap Modal

#27

Post by napoleond »

kirillzubovsky wrote: post #21
napoleond wrote: post #19

Earlier quoted context omitted.

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.

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.

I think we agree, at least in principle. Bootstrap is meant to facilitate quick prototyping, though--quick prototypes for complicated flows will include sub-optimal UI.

Desktop solutions I'm talking about: anything in Windows control panel (people still use that OS, God help them), any configuration panel in Ubuntu (go modify your network settings, for example), all sorts of horrible-to-use and yet somehow magically-useful simulation/CAD programs, etc. (A common theme here is that Apple software and most software created for Macs does not have this UI pattern, because it is indeed suboptimal. The rest of the world still sees it a lot.)

Re: A Better Twitter Bootstrap Modal

#29

Post by latchkey »

ralphleon wrote: post #25
latchkey wrote: post #17

Earlier quoted context omitted.

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.

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.

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.

Re: A Better Twitter Bootstrap Modal

#30

Post by joelhaasnoot »

kirillzubovsky wrote: post #22

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!

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