Open a bootstrap modal from another page

Question

I have a list of links that each open their own modal. Each of these modals contents display an html file. Here is a sample;

<div id="how-rtm-works" class="modal hide fade" 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">&times;</button>
<h1 id="myModalLabel">How Right to Manage works</h1>
</div>
<div class="modal-body" id="utility_body">
<p>One fine body…this is getting replaced with content that comes from passed-in href</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<li><a data-target="#how-rtm-works" href="modal-content/how-RTM-works.html" role="button" data-toggle="modal">How Right to Manage works</a></li>

Because there is more than one modal, each has its own ID which is referenced in the data-target.

Can anyone advise me on how I would target these modals from another page, or in my case all pages as these will be linked in the website footer nav.

I don't think I get what you are asking... You want a modal on one page to open on another? — Peter, Mar 05 '14 at 16:28
I have five links on a webpage that each open their own Modal ( I have done this because I was unable to work out how to use the one Modal for all links.) I would like to have these links in my template footer as well as on the page that has the Modals, so effectively if the user clicks a link in the footer from another page they will be directed to the page that contains the modals and opens the Modal. — Steve Joiner, Mar 06 '14 at 13:14
Why don't you just make separate pages like a regular website :/ — Peter, Mar 07 '14 at 14:38
I understand your point! The main reason is because we wanted to have certain information available to the user from this particular page but didn't want to take them away from the natural path we are trying to guide them through. I'm beginning to think we are over complicating things for ourselves! — Steve Joiner, Mar 10 '14 at 10:37
hahaha! I think you may be, why don't you use the accordion? — Peter, Mar 10 '14 at 13:40
Try the answer from Buzina on [this link](http://stackoverflow.com/questions/32958219/getting-bootstraps-modal-content-from-another-page) It worked for me. — Fabio Carvalho, Nov 05 '16 at 00:43

score 3 · Accepted Answer · answered Feb 11 '15 at 14:38

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>

Not sure why I didn't ever try this over three years ago. Had a similar issue and tried this which works perfectly. Many belated thanks #burunoh — Steve Joiner, Jul 03 '18 at 09:47

Mohamed Ali Bouhoum · Answer 2 · 2014-03-05T17:59:23.593

2

Well your modals had IDs, I think you can trigger them by adding #how-rtm-works to the end of the link for example if you have a modal called id="My_Modal" you can make a link <a href="your_link/#My_Modal">Link me to the modal</a> If that is your question I guess this can help you out !

edited Mar 05 '14 at 17:59

answered Mar 05 '14 at 17:50

Mohamed Ali Bouhoum

81
1
9

Actually i'm not sure how I would do this because my modals content are external html files referenced in the href tag and the modal id is referenced in the data-target tag. I done it this way so that the page didn't permanently have large amounts of html embedded in the page all the time. But maybe this is the only way if I want to link to them from outside the page with the modals. – Steve Joiner Mar 06 '14 at 15:07
have now tried this but it still doesn't open the modal – Steve Joiner Mar 06 '14 at 15:29
Well can u send the link of ur website to check that ? – Mohamed Ali Bouhoum Mar 07 '14 at 17:49
A page that holds the modals can be viewed at: test-site.rtmf.org.uk/services-retirement.php I would like to be able to open them from the relevant links in the footer nag when on other web pages. – Steve Joiner Mar 12 '14 at 09:08

Open a bootstrap modal from another page

2 Answers2