Getting Bootstrap's Modal Content from Another Page

Getting Bootstrap's modal content from another page

Update

The way you're trying to get modal's content from another page is incorrect.

According to Bootstrap's documentation:

If a remote URL is provided, content will be loaded one time via
jQuery's load method and injected into the .modal-content div. If
you're using the data-api, you may alternatively use the href
attribute to specify the remote source. An example of this is shown
below:

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

So, firstly, you should change your menu.html file to be similar to the code above:

<li><a href="Lab6.html" data-target="#theModal" data-toggle="modal">Lab 6</a></li>

And then, part of your Lab6.html page must reside inside your menu.html page. E.g:

<div class="modal fade text-center" id="theModal">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>

Finally, your LAB6.html would have only the code that was inside .modal-content. E.g:

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal">X</button>
  <h1>Lab 6</h1>
</div>
<div class="modal-body">
  <div class="panel panel-default">
    <div class="panel-heading text-center">
      Employee Information
    </div>
    <div class="panel-body">
      <div class="row">
        <div class="text-right col-xs-2">Title:</div>
        <div class="text-left col-xs-3" id="title"></div>
        <div class="text-right col-xs-2">First:</div>
        <div class="text-left col-xs-3" id="firstname"></div>
      </div>
      <div class="row">
        <div class="text-right col-xs-2">Phone#</div>
        <div class="text-left col-xs-3" id="phone"></div>
        <div class="text-right col-xs-2">Email</div>
        <div class="text-left col-xs-3" id="email"></div>
      </div>
      <div class="row">
        <div class="text-right col-xs-2">Dept:</div>
        <div class="text-left col-xs-3" id="departmentname"></div>
        <div class="text-left col-xs-2">Surname:</div>
        <div class="text-left col-xs-4">
          <input type="text" placeholder="enter last name" id="TextBoxLastName" class="form-control" />
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <div class="panel-footer">
      <input type="button" value="Find Employee" id="empbutton" />
      <div class="col-xs-10" id="lblstatus"></div>
    </div>
  </div>
</div>

Take a look at the plnkr I created for you.

Open a bootstrap modal from another page

First page you'll use:

<a href="second.html#myModalLabel" class="btn btn-primary"> Open Modal </a>

At the second page you'll insert your modal and the follow script:

        <script type='text/javascript'>
            (function() {
                'use strict';
                function remoteModal(idModal){
                    var vm = this;
                    vm.modal = $(idModal);

                    if( vm.modal.length == 0 ) {
                        return false;
                    }

                    if( window.location.hash == idModal ){
                        openModal();
                    }

                    var services = {
                        open: openModal,
                        close: closeModal
                    };

                    return services;
                    ///////////////

                    // method to open modal
                    function openModal(){
                        vm.modal.modal('show');
                    }

                    // method to close modal
                    function closeModal(){
                        vm.modal.modal('hide');
                    }
                }
                Window.prototype.remoteModal = remoteModal;
            })();

            $(function(){
                window.remoteModal('#myModalLabel');
            });
        </script>

Getting bootstrap modal content from another HTML file

The problem you are experiencing is one that is very common when viewing website files using the file:/// protocol in Google Chrome.

If you take a look at the error message you are receiving in your log:

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

As a bit of insight, a cross origin request occurs when you try and access a resource (such as a Javascript file or CSS file for example) from another domain. When you view your website as a local file (i.e. using Chrome's file:/// protocol), the types of files that you can access are limited. This is called a same-origin policy. These policies exist to prevent attacks such as cross-site scripting (XSS) attacks affecting your computer.

The Mozilla Developer Network has an interesting article on same-origin policies for file:/// URIs, which explains your problem nicely:

For example, if you have a file foo.html which accesses another file bar.html and you have navigated to it from the file index.html, the load will succeed only if bar.html is either in the same directory as index.html or in a directory contained within the same directory as index.html

Applying this to the errors that you have experienced, presumably the file you are trying to access is in a different directory which is causing the cross origin request error.

It is worth noting that all of these problems are occurring because you are testing your website on your local file system. To fix this problem, you should try testing your website on a localhost server. This effectively means that you can test your website using either HTTP or HTTPS.

Some good solutions for creating a localhost server on your PC are:

• XAMPP - A good solution for Windows, Mac and Linux
• WampServer - Another solution for Windows only.

I am unfamiliar with WampServer so here are the instructions for XAMPP:

• Go to the XAMPP website and download the appropriate installer. This will prompt you to choose an installation location. On Windows, this is usually C:\xampp.
• Place all of your web files in the folder <xampp installation folder>\htdoc\
• Open the XAMPP control panel and click Start under Apache
• In your web browser, type localhost then press Enter
• You should now be able to see your website without the problems you have described.

Bootstrap Modal from another page

Make use of the element iframe

<div class="modal-body">
    <iframe src="another.page" />
</div>

And maybe you want to style it

.modal iframe {
    width: 100%;
    height: 100%;
}

http://jsfiddle.net/u29Tj/3/

Just to be clear, that you read the manual, based on your comments:

Look at the data-target attribute of your link: It is an anchor to the HTML Element Modal Window. You need this for Boostrap to show and hide the window. You should not linking it to your page. You need to link it to your Modal! In the Modal Body you use the Iframe.

<!-- trigger modal -->
<a data-toggle="modal" href="#myModal">
  Launch demo modal
</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
          <iframe src="http://stackoverflow.com/questions/23801446/bootstrap-modal-from-another-page/23801599" />
      </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>
  </div>
</div>

Alternative

Homework for you:

• Give each link data-iframemodal Attribute you want to have a Iframe.
• Set a Clickhandler for each attribute which has data-iframemodel:
  
  • Open a new Modal via JS. http://getbootstrap.com/javascript/
  • Set Content with iframe and as source you extract from the event the senders href attribute.

BootStrap 4 Modal Content from another HTML file

I am just a coding scrub and had sourced the wrong version of jquery (slim, which does not support ajax calls like .load()). Make sure to use the full version of jquery!!!

---

Related Topics