How to make a pop up with an iFrame in JavaScript

Written by sue smith Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to make a pop up with an iFrame in JavaScript
Pop-up windows are used within many sites to aid interaction with elements such as forms. (Stockbyte/Stockbyte/Getty Images)

In an HTML web page, you can use JavaScript code to present content dynamically, as the visitor interacts with your site. Using a JavaScript function, you can launch new windows such as pop-ups on user interaction events such as clicks. Your new window can contain any HTML content you need, including iframes. With an iframe, you can include the content of a web page within the body of another page, meaning that whatever is contained in the source page will be displayed in the iframe when it is requested by a user's browser.

Skill level:
Moderately Easy


  1. 1

    Prepare your page. Open the HTML page you are working with or create a new one using the following outline: <!DOCTYPE HTML> <html> <head> </head> <body> </body> </html>

    If you already have a user interface item you plan on using to detect some event to launch the pop-up, use that. If not, to demonstrate the functionality, you can use the following sample button added to the body section of the page: <input type="button" value="click me" onclick="openPopup()"/>

    The button refers to a function in which the pop-up code will execute.

  2. 2

    Add a function. If you already have JavaScript code within the page head section or within a separate ".js" file which you have linked to the page, you can add the new function there. Otherwise, add a script element to the head section of your page: <script type="text/javascript"> </script>

    Inside the script, add the function outline using the name specified as the event listener for your button or other interactive page element: function openPopup(){ //launch popup }

  3. 3

    Open a new window. Inside the JavaScript function, launch a new window, retrieving a reference to it so that you can write content into it: var newWindow ="", "_blank", "width=500,height=500");

    The window open command opens a new browser window. You can pass the URL of a page to open in the window as first parameter to the open method, or pass an empty string if you plan on coding the content in JavaScript. Using the "_blank" parameter ensures that a new window is opened. Specifying the width and height gives you control over the window dimensions.

  4. 4

    Add an iframe to your window. Still inside the JavaScript function, add code using the new window variable to write HTML content to the pop-up: newWindow.document.write("<html><head></head><body><iframe src='popup.html' width='350px' height='350px'><p>No iframe support.</p></iframe></body></html>");

    This sample code passes the markup for a complete HTML page into the new pop-up window. The HTML outline includes an iframe element. The iframe in this case refers to an HTML page which would be saved as "popup.html" on the same server and directory as the main page. Whatever is listed in that HTML file will appear in the iframe within the pop-up window. You can specify width and height attributes of your choice and can include default content to display if the user's browser does not support iframes.

Tips and warnings

  • You can specify various additional properties for both the new window and the iframe, including window title, toolbar and scrollbar options for the window and various styling properties for the iframe.
  • Some users may have their browsers set to block pop-ups, in which case your new window may not be displayed.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.