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

我有一個鏈接列表，每個鏈接打開自己的模式。這些模態內容中的每一個都顯示一個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，它在數據目標中被引用。

任何人都可以告訴我如何從另一個頁面，或在我的情況下，所有頁面，因爲這些將鏈接在網站頁腳導航目標這些模態。

來源

2014-03-05 Steve Joiner

我不認爲我得到你的要求...你想在一個頁面上打開另一個模式？ – Peter

我在網頁上有五個鏈接，每個鏈接都打開自己的Modal（我已經這樣做了，因爲我無法弄清楚如何在所有鏈接中使用這個Modal）。我希望在我的模板頁腳中包含這些鏈接就像在具有Modals的頁面上一樣，如果用戶從另一個頁面單擊頁腳中的鏈接，它們將被引導至包含模塊的頁面並打開Modal。 –

爲什麼不像一個普通網站那樣製作單獨的網頁：/ – Peter

嗯，你的情態動詞有身份證，我想你可以通過添加＃如何-RTM-作品鏈接結束例如觸發他們，如果你有一個叫做模式 id="My_Modal" 你可以做一個鏈接 <a href="your_link/#My_Modal">Link me to the modal</a> 如果這是你的問題，我想這可以幫助你！

來源

2014-03-05 17:50:56

我會試試這個..感謝您的建議穆罕默德！ –

其實我不知道我會怎麼做，因爲我的模態內容是在href標記中引用的外部html文件，模式ID在數據目標標記中被引用。我這樣做是爲了使頁面不會永久在頁面中嵌入大量的html。但也許這是唯一的方法，如果我想用模態鏈接到頁面外部。 –

現在已經試過，但它仍然不打開模式 –

第一頁，你會使用：

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

來源

2015-02-11 14:38:38 burunoh

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

回答

相關問題