從另一個頁面打開引導模態

Question

我有一個鏈接列表，每個鏈接都打開自己的模式。 這些模式內容均顯示一個html文件。 這是一個示例；

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

因為有多個模式，所以每個模式都有自己的ID，該ID在數據目標中引用。

誰能給我建議我如何從另一個頁面定位這些模式，或者就我而言，所有頁面都將鏈接到網站頁腳導航中。

Answer 1

好，您的模式有ID，我想您可以通過在鏈接的末尾添加＃how-rtm-works來觸發它們，例如，如果您有一個名為id="My_Modal" ，則可以建立鏈接<a href="your_link/#My_Modal">Link me to the modal</a>如果這是您的問題，我想這可以為您提供幫助！

Answer 2

您將使用的首頁：

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

在第二頁上，您將插入模態和以下腳本：

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