Twitter Bootstrap modal - load "remote" content

Question

I'm trying to load "remote" content, basically information that is sent through a HTTP request (on the same site). The returned content itself throws back information such as :

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;    </button>
<h3>Change Your Password</h3>
</div>
<div class="modal-body">
<form>
    <fieldset>
        <label>Your current password</label>
        <input type="password" placeholder="password">
        <label>Confirm current password</label>
        <input type="text" placeholder="password">

        <button type="submit" class="btn">Submit</button>
    </fieldset>
</form>
</div>
<div class="modal-footer">
    <a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>
</div>

However, for the modal box to show the remote content, I believe that I should be showing the modal-body class already:

<div class="modal fade hide" id="ajax">
    <div class="modal-body">
        <p>body content to be replaced</p>
    </div>
</div>

How do I step around this, and provide the full modal div content and make it show properly?

Answer 1

It seems like you want to populate the modal body with a webpage. You could invoke the modal using an a tag and using the data-target attributes:

<a id="file_attach" data-toggle="modal" href="http://fiddle.jshell.net/jhfrench/6K8rD/show/" data-target="#utility" class="btn">Modal 1</a>

The Twitter documentation notes

If a remote url is provided, content will be loaded via jQuery's load method and injected into the .modal-body. If you're using the data api, you may alternatively use the href tag to specify the remote source.

See http://jsfiddle.net/jhfrench/qv5u5/ for an example (and see How can I reuse one Bootstrap modal div? for details on how to resuse one modal between multiple invoking links).