Twitter Bootstrap 3 and multiple Modals

I’ve been reworking pylons to use the newer version of Twitter Bootstrap.  One of the things I’m currently reworking is some of the modal dialogs that pop up to show various stuff – the pylon details, a login selection dialog, controls for reporting a pylon, etc.  The particular issue that I was having is that, despite only having a single modal open, I was still able to interact with the controls for the other modals.  This meant that when, say, picking a login method (Twitter, Facebook, or Google), you could bring your mouse over certain areas of the modal and it would switch from being the standard cursor to the hand shape, as if there was something clickable there, despite not looking like it.  It’s as if the other modals were still open, despite not being visible.

As it turns out, the fix was reasonably easy.  Instead of:

<div class=”modal fade” id=”nameOfTheModalGoesHere” …

I needed:

<div class=”modal hide fade” id=”nameOfTheModalGoesHere” …

Apparently, (in layman terms), the hide portion of the class causes the modal to actually be hidden and behave like it is hidden – not just hidden from view.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s