Twitter BootStrap Modal Window fallback link

Question

I am using Twitter Bootstrap modal windows. Just incase the modal windows dont work because of the js error - have a fall back pages. How can i make sure the page is loaded if the modal window doesnt load ?

Link to open Modal Window

<a href="#login-modal" data-toggle="modal" data-target="#login-modal">Login</a>

Modal Window

<!-- Login Modal -->
        <div id="login-modal" class="modal hide fade landing-modal" tabindex="-2" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    ×
                </button>
                <h3>Login</h3>
            </div>
            <div class="modal-body">
                <form>
                    <div class="control-group">
                        <label for="email">Email Address</label>
                        <div class="controls">
                            <input class="input-medium" name="email" type="text"  />
                        </div>
                    </div>
                    <div class="control-group">
                        <label for="password">Password</label>
                        <div class="controls">
                            <input class="input-medium" name="password" type="password" />
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="checkbox">
                            <input type="checkbox" value="">
                            Remember me</label>
                    </div>
                    <div class="control-group">
                        <div class="controls">
                            <button type="submit" class="button">
                                Login
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

When i try to Add the link to the href as follows

 <a href="login.html" data-toggle="modal" data-target="#login-modal">Login</a>

the Linked Page Loads in the Modal Window!!

Answer 1

Looking at line 223 in bootstrap-modal.js revealed what's happening:

, option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data())

When using the data api the modal checks if the href attribute is not an id and sets that as the value for the remote option. This causes the page to load the data-target content initially and then load in the href content after as remote content.

So to avoid the href content getting loaded into the modal you need to specify data-remote="false" on your link:

<a href="/some-login-page.html" data-toggle="modal" data-target="#login-modal" data-remote="false">Login</a>

Answer 2

The Modal plugin gives precedence to the data-target attribute. You can then use the href to point to the fallback link that you want. Since the Modal plugin calls preventDefault on click events matching the selector [data-toggle="modal"], the link will only be followed if JavaScript is disabled (or the Modal plugin isn't loaded).

One thing to keep in mind, however, is that the Modal plugin does use the href attribute for loading remote content. To bypass that feature from being activated, just include a '#' at the end of the href value.

<a href="/some-login-page.html#" data-toggle="modal" data-target="#login-modal">Login</a>