CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
nahtnam
nahtnam

Reputation: 2689

Bootstrap Open Contents from another file

I stumbled across a similar question to mine, but not exactly what I want (Fancy box, grab from url). I want to do the same thing but with bootstrap modals. I did find some tutorials on this by adding data-remote and it does not work. Also it is not exactly what I want to do. What I want is just simply a modal. Not any of the code for the header, main part or the footer. All of that will be included in the external page (the page is still actually located on the server). So basically a link like this <a href="/chat/alternate" class="action-modal">faq</a> will be included and it will open a bare modal

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
//ajax loads the external page stuff into here.
</div>

Then on the external page (that is on the same server) would contain something like this:

<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
    ...
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div><!-- /.modal-content -->

I hope this is possible. Thanks for the help!

Upvotes: 0

Views: 623

Answers (1)

nahtnam
nahtnam

Reputation: 2689

I figured it out. On the main page, put

<a href="" data-toggle="modal" data-target=".modal" data-remote="URL_HERE">TEST/a>

as well as this:

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true">
</div>

Then simply put something like this on the remote site.

<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  <h4 class="modal-title" id="myModalLabel">title</h4>
</div>
<div class="modal-body">
  ...
</div>
<div class="modal-footer">
  <a href="" class="btn btn-primary" target="_blank" role="button">Go! &raquo;</a>
</div>
</div>
</div>

Upvotes: 1

Related Questions