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">× </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?
Best Answer
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
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).