CODEWITHSUNDEEP
javascriptjqueryhtmliframe
user3911182
user3911182

Reputation: 39

Popup an iframe or website when button pressed

I was planning on making a popup when a button is pressed that it would dim the background. Like opening an image in Facebook, but my popup is filled with textbox for example First name, Last name, Middle name, user name, and password. I was thinking if how can I achieve that? I tried reading pirobox and fancybox but didn't get it. I think I need an online script where I could just call it. Can you guys suggest on how can I accomplish this?

Upvotes: 3

Views: 8587

Answers (3)

mjimcua
mjimcua

Reputation: 2799

You can use fancybox

In this page you can see a lot of examples.

There are several iframe examples.

javascript code

$("#various5").fancybox({
        'width'             : '75%',
        'height'            : '75%',
        'autoScale'         : false,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'type'              : 'iframe'
    });

HTML code

<a id="various5" href="/data/iframe.html">Iframe (75% width and height)</a>

You load fancybox library and initialize fancybox object. When you click in your link with iframe url href the popup shows iframe content

Upvotes: 1

Carlos M. Meyer
Carlos M. Meyer

Reputation: 446

If you can use bootstrap, then "modals" will do what you want: http://getbootstrap.com/javascript/#modals

Put your iframe inside the "modal-body"

<link rel="stylesheet" type="text/css" href="yourCSSPath/bootstrap.min.css">
<script src="yourJsPath/jquery.min.js"></script>
<script src="yourJsPath/bootstrap.min.js"></script>

<div id="myModal">
...
     <div class="modal-body" id="miniWindow">
     </div>
...
</div>

<a href="javascript:showIframe('page.html')">Button</a>

<script>
function showIframe(url){
    code = "<iframe src='/yourPathForTheIframes/" + url + "'></iframe>";
    $("#miniShow").html(code);
    $("#myModal").show();
}
</script>

Upvotes: 0

Woodsy
Woodsy

Reputation: 3377

Modal Dialogs with jQuery UI should solve your issue

Upvotes: 0

Related Questions