bootstrap modal data-remote not working in Chrome

Question

I have got bootstrap modal data-remote working for all browsers except for Chrome. The backdrop shows but not the modal itself.

parentPage.html

<a href="#" data-toggle="modal" data-target="#myModal"><img src="images/ball.gif" alt="Add Account"/></a>
<div class="modal fade" id="myModal" tabindex="-1" data-remote="./popups/remotePage.html" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" >
</div>

remotePage.html

<div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        Header
      </div>
      <div class="modal-body">
            One fine body...
      </div>
      <div class="modal-footer">Footer
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->

I have already tried putting data-remote in the <a> tag.

What am i missing?

Answer 1

Use this code instead. Assuming you are using Twitter Bootstrap 3.

parentPage.html

<a href="./popups/remotePage.html" data-toggle="modal" data-target="#myModal"><img src="images/ball.gif" alt="Add Account"/></a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" >
<div class="modal-dialog">
    <div class="modal-content">
    </div>
</div>
</div>

remotePage.html

<div class="modal-header">Header</div>
<div class="modal-body">
    One fine body...
</div>
<div class="modal-footer">Footer</div>

And don't forget that the directory structure is something like this:

parentPage.html
popups
   remotePage.html

---

Update

Based on the comments on answer, Google Chrome does not allow XMLHttpRequest from file protocol (file://) as a security measure. You have two options available.

One is have your files hosted in HTTP server. If you are using Windows, use WAMP or XAMPP.

And the second option is disable web security mode in Chrome, though this is not recommended

chrome.exe --disable-web-security

For your reference: Allow Google Chrome to use XMLHttpRequest to load a URL from a local file