0

このテキストがあり、テキストをクリックするたびにClick meWebサイト（たとえば）への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
...

繰り返しますが、誰かが「Click me」テキストをクリックしたときにポップアップを開くにはどうすればよいですか？

4

3 に答える 3

1

URLからコンテンツを表示するためにiframeを使用したくないと確信しています。代わりに、ポップアップウィンドウに表示したいと考えています。fancybox-rails gemを使用できます。readme に記載されているように 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 に答える
1

modaltargetの属性の値に設定された属性を持つリンクを使用します。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;
}

デモ (編集)

MDN で

于 2013-02-27T19:53:57.683 に答える
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 に答える