0

假设我有这个 text 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
...

同样，当有人点击“点击我”文本时，我如何打开一个弹出窗口？

4

3 回答 3

1

使用链接，其target属性设置为namemodal 上的属性值<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;
}

演示 （编辑）

在 MDN 上

于 2013-02-27T19:53:57.683 回答
1

我确定您不想使用 iframe 来显示来自 url 的内容，而是想在弹出窗口中使用它。哟可以使用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 插件可用于相同的。

于 2013-02-27T20:34:51.580 回答
0

如果我理解正确，有几种方法可以做到这一点。如果您将 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

于 2013-02-27T19:51:43.657 回答