將文本鏈接到包含iframe的對話框

Question

說我有這個文本Click me ，我想要一個模態窗口，其中包含一個網站的iframe（例如， www.google.com ），只要點擊文本就會出現。

我該怎么做呢？ 我做了一些谷歌搜索和iframe的例子

%iframe{:src => "http://www.google.com"}

但我不確定如何使用它......

這是我的視圖文件（ html.haml ）的結構，我嘗試過這樣的東西（但它不起作用！）：

...
%li
  = User_name
  = link_to 'Click me' %iframe{:src => "http://www.google.com"}
%li
...

同樣，當有人點擊“點擊我”文字時，如何打開彈出窗口？

Answer 1

使用其target屬性設置為模態<iframe>上name屬性值的鏈接：

<a href="http://www.bing.com" target="modal">Open Bing in an iframe</a>
<iframe src="#" name="modal"></iframe>

然后在你的JS中：

var modalTriggers = Array.prototype.slice.call(document.querySelectorAll('a[target=modal]'));
var modal = document.querySelector('iframe[name=modal]');

modalTriggers.forEach(function(trigger){
    trigger.addEventListener('click', function() {
        modal.classList.toggle('active');
    }, false);
});

還有一些CSS：

iframe[name=modal] {
    display: none;
    width: 92%;
    height: 92%;
    position: fixed;
    top: 4%; left: 4%;
    background: white;
    box-shadow: 0 2px 12px 6px rgba(0,0,0,.6);
}

iframe[name=modal].active {
    display: block;
}

演示 _（編輯）

在MDN上

Answer 2

我相信你不想使用iframe來顯示網址中的內容，而是想在彈出窗口中顯示它。 你可以使用fancybox-rails gem 。 按照自述文件中的描述安裝gem之后，在視圖文件中添加它

%li
  = User_name
  = link_to 'Click me', "http://www.google.com", :class => "iframe"

這在你的javascript文件中

$(document).ready(function() {
  $("a.iframe").fancybox();
});

您可以在此處詳細了解其用途。 還有許多其他jquery插件可供使用。

Answer 3

如果我理解正確，有幾種方法可以做到這一點。 如果你將jquery包含在你的html中，這是一個簡單的方法

    <html>
    <head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('#clickMe').click(function(){
    $('#myIframe').show(); 
    });
    });
    </script>
    </head>
    <body>
    <input id="clickMe" name="clickMe" type="button"/>
    <iframe id="myIframe" style="display:none;" src="http://www.othersite.com/some/path?param1=value1&param2=value2">
        <p>Placeholder text; only shows up if the page DOESN'T render!</p>
    </iframe>
    </body>
    </html>

你也想把你的iframe設計為一個模態窗口...有很多關於它的教程....以及處理關閉行為

這是一個更深入的解釋http://www.jacklmoore.com/notes/jquery-modal-tutorial

將文本鏈接到包含iframe的對話框

問題描述

3 個解決方案

解決方案1
1 2013-02-27 19:53:57

演示 _（編輯）

解決方案2
1 已采納 2013-02-27 20:34:51

解決方案3
0 2013-02-27 19:51:43

將文本鏈接到包含iframe的對話框

問題描述

3 個解決方案

解決方案1 1 2013-02-27 19:53:57

演示 （編輯）

解決方案2 1 已采納 2013-02-27 20:34:51

解決方案3 0 2013-02-27 19:51:43

解決方案1
1 2013-02-27 19:53:57

演示 _（編輯）

解決方案2
1 已采納 2013-02-27 20:34:51

解決方案3
0 2013-02-27 19:51:43