Link a text to a dialog box containing an iframe

Question

Say I have this text Click me, and I want a modal window, which contains an iframe to a website (eg., www.google.com) to come up whenever one clicks on the text.

How should I go about doing this? I did some googling and an example of the iframe

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

But I am not sure how I could use it ...

Here's the structure of my view file (html.haml), I tried something like this (but it didn't work!):

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

Again, how do I open a popup when some one clicks on the 'Click me' text?

you aren't sure how to handle the js to render your iframe? and do you mean an actual dialog box or just in a pop-up or modal window? — Brad, Feb 27 '13 at 19:40
Well, perhaps I shouldn't have been too specific about the dialog. Yes, I just want a popup window that appears inside the current window (not the kind that would open in new tab/window) — One Two Three, Feb 27 '13 at 19:45
I'm also not sure what you want. Do you want an overlay to open? — vinczemarton, Feb 27 '13 at 19:45
@SoonDead Do you use facebook? If so, do you notice when you click on 'Click to change photo' in your profile page, you'd get a popup window asking you to choose some photo to be your profile pic? ... I kind of want to do the same thing (It's just simple in my case in that I don't want a file chooser or anything, I just want a popup that contains on iframe) — One Two Three, Feb 27 '13 at 19:47

Web_Designer · Answer 1 · 2013-02-27T20:13:11.847

1

Use a link with its target attribute set to the value of the name attribute on your modal <iframe>:

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

Then in your 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);
});

And Some 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

edited Feb 27 '13 at 20:13

answered Feb 27 '13 at 19:53

Web_Designer

72,308
93
206
262

note that he said: "inside the current window (not the kind that would open in new tab/window)" in the comments above – Brad Feb 27 '13 at 19:56
@Brad This opens the website in the iframe, not a new tab/window. – Web_Designer Feb 27 '13 at 20:07
1

P.S. I'm no big fan of Bing. Google just doesn't like being in an iframe. – Web_Designer Feb 27 '13 at 20:24

Manoj Monga · Accepted Answer · 2013-02-27T21:04:08.547

1

I am sure you do not want to use an iframe for displaying the content from a url, instead you want to shoe it in a pop up window. Yo can use fancybox-rails gem. after installing the gem as described in the readme add this in your view file

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

and this in your javascript file

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

You can read more about the uses here. There are many other jquery plugins available for the same.

edited Feb 27 '13 at 21:04

answered Feb 27 '13 at 20:34

Manoj Monga

3,033
14
19

Is that a dot (`.` after the `'Click me'`? Or did you mean a colon? – One Two Three Feb 27 '13 at 21:02
Is there anything else I need to add? (Because when I click on the link, i t opens a new window) – One Two Three Feb 27 '13 at 21:07
Did you install the fancybox gem? – Manoj Monga Feb 27 '13 at 21:11
Yes, I did install the gem (and edit my applicaion.css and application.js files) – One Two Three Feb 27 '13 at 21:19
Do you get any error in firebug console if you are using FF. or any other web developer tool. – Manoj Monga Feb 27 '13 at 21:32
Check this [link](http://stackoverflow.com/questions/14344289/fancybox-doesnt-work-with-jquery-v1-9-0-f-browser-is-undefined-cannot-read#14344290) – Manoj Monga Feb 28 '13 at 09:24

score 0 · Answer 3 · answered Feb 27 '13 at 19:51

there are a couple ways to do this if i understand you correctly. this is a simple approach if you include jquery into your 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>

you'd also want to style your iframe to behave like a modal window...there are lots of tutorials on that.... as well as handle the closing behaviors

this is a more in depth explanation http://www.jacklmoore.com/notes/jquery-modal-tutorial

Link a text to a dialog box containing an iframe

3 Answers3

Demo (edit)

Demo _(edit)