5

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?

Sachin
  • 40,216
  • 7
  • 90
  • 102
user3311026
  • 53
  • 1
  • 3

1 Answers1

8

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

Community
  • 1
  • 1
Jaime Gris
  • 1,136
  • 6
  • 11
  • Yes I am using twitter bootstrap 3. I am still getting the same result. Works fine in FF but not in Chrome. – user3311026 Feb 14 '14 at 17:34
  • Made a small edit on the code at the parentPage.html. Also, check the Google Chrome's Web Developer tool by pressing Ctrl + Shift + I and see if there are errors in Javascript. – Jaime Gris Feb 14 '14 at 17:37
  • XMLHttpRequest cannot load file:///Users/MeLap/Documents/Test/popups/remotePage.html. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. – user3311026 Feb 14 '14 at 17:56
  • Ahh, that explains. Google Chrome does not allow XMLHttpRequests from file protocol (`file://`) for security. – Jaime Gris Feb 14 '14 at 18:52