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>