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属性设置为模式name上<iframe>属性值的链接：

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

Demo _(edit)

On 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();
});

您可以详细了解用途here。还有许多其他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 个答案:

Demo _(edit)

将文本链接到包含iframe的对话框

3 个答案:

Demo (edit)

Demo _(edit)