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 es 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 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 es 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.

• javascript
• jquery
• html
• twitter-bootstrap
• modal-dialog

• I don't think I get what you are asking... You want a modal on one page to open on another? – Peter Commented Mar 5, 2014 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 Commented Mar 6, 2014 at 13:14
• Why don't you just make separate pages like a regular website :/ – Peter Commented Mar 7, 2014 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 plicating things for ourselves! – Steve Joiner Commented Mar 10, 2014 at 10:37
• hahaha! I think you may be, why don't you use the accordion? – Peter Commented Mar 10, 2014 at 13:40

2 Answers 2

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>

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 !