5

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?

Improve this question

1 Answer 1

Reset to default
3

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).

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Be aware that the page gets loaded into the modal via AJAX, and is therefore subject to "Same Origin Policy" limitations (ie: you won't be able to load awesomesite.com into a div hosted at myapp.com).
does that mean that response return by href should be AJAX response? or we can have some other page from the same application.
@mutant: I'm sorry, I don't think I understand your question.
Its working fine. I was under impression that it requires json response, but thats not the case. Sorry for confusing question and thanks for your response.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.