Javascript 将文本链接到包含iframe的对话框_Javascript_Ruby On Rails_Iframe

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

javascript ruby-on-rails iframe

Javascript 将文本链接到包含iframe的对话框,javascript,ruby-on-rails,iframe,Javascript,Ruby On Rails,Iframe,假设我有这个文本点击我，我想要一个模式窗口，它包含一个网站的iframe（例如，www.google.com），每当点击文本时就会出现我该怎么做呢？我做了一些谷歌搜索和iframe的一个例子 %iframe{:src => "http://www.google.com"} 但是我不知道我怎么用它下面是我的视图文件的结构（html.haml），我尝试了类似的方法（但没有成功！）：同样，当有人单击“单击我”文本时，如何打开弹出窗口？如果我理解正确，有几种方法可以做到这一点。如果将jqu

假设我有这个文本

点击我

，我想要一个模式窗口，它包含一个网站的iframe（例如，

www.google.com

），每当点击文本时就会出现

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

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

但是我不知道我怎么用它

下面是我的视图文件的结构（

html.haml

），我尝试了类似的方法（但没有成功！）：

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

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


$（文档）.ready（函数（）{
$（'#clickMe'）。单击（函数（）{
$（'#myIframe'）.show（）；
});
});
占位符文本；仅在页面未呈现时显示

您还需要将iframe的样式设置为类似于模态窗口的方式……关于这一点，有很多教程。。。。以及处理关闭行为

这是一个更深入的解释

使用链接，将其

目标

属性设置为模态

上的

名称

属性的值：

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

还有一些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;
}

我确信您不希望使用iframe来显示url中的内容，而是希望将其放在弹出窗口中。你可以用。按照自述文件中的说明安装gem后，将其添加到视图文件中

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

这在你的javascript文件中

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

您可以阅读更多有关使用的信息。有许多其他jquery插件可用于相同的功能

您不确定如何处理js来呈现iframe？你指的是一个真正的对话框，还是仅仅在一个弹出窗口或模式窗口中？嗯，也许我不应该对这个对话框说得太具体。是的，我只想在当前窗口中显示一个弹出窗口（不是在新选项卡/窗口中打开的那种），我也不确定您想要什么。你想打开一个覆盖吗？@SoonDead你使用facebook吗？如果是这样的话，你是否注意到当你点击个人资料页面中的“点击更改照片”时，你会看到一个弹出窗口，要求你选择一些照片作为你的个人资料照片。。。我有点想做同样的事情（在我的例子中很简单，我不想要文件选择器或任何东西，我只想要一个包含在iframe上的弹出窗口）注意，他在评论中说：“在当前窗口内（不是在新选项卡/窗口中打开的那种）”above@Brad这将在iframe中打开网站，而不是新的选项卡/窗口。我不是Bing的超级粉丝。谷歌只是不喜欢在iframe中。那是一个点（

在

'Click me'

之后？还是一个冒号？还有什么我需要添加的吗？（因为当我点击链接时，打开了一个新窗口）你安装了fancybox gem吗？是的，我安装了gem（并编辑了application.css和application.js文件）如果您使用FF.或任何其他web开发人员工具，firebug控制台中是否会出现任何错误。

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

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