How to make a pop out text box in html

Written by adrian grahams Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to make a pop out text box in html
Implement a pop-out text box on your website with HTML code. (Comstock/Comstock/Getty Images)

Placing a pop-out text box on your website is an effective way to display information to visitors without them opening a new Web page. You can use a pop-out text box on your website to display text that is relevant to the content of the main page -- for example, many websites use pop-out text boxes to display terms and conditions or more details about an advertised product. You can display a pop-out text box on your website by creating a new page for the pop-out and inserting a line of HTML code on the main content page.

Skill level:


  1. 1

    Launch your regular website design program or text editor tool. Windows-based computers ship with the Microsoft WordPad and Notepad text editor applications.

  2. 2

    Click "File" on the main menu, then click "Open" and open the Web page from which you want to display the pop-out text box.

  3. 3

    Copy the following code and paste it into the header section of the Web page. The header section comprises all the code between the "<head>" tag and the "</head>" tag:

    <SCRIPT TYPE="text/javascript">


    function popup(mylink, windowname)


    if (! window.focus)return true;

    var href;

    if (typeof(mylink) == 'string')



    href=mylink.href;, windowname, 'width=300,height=150,scrollbars=no');

    return false;




  4. 4

    Select and highlight the height and width instructions in the pasted code. Change these attributes to configure the pop-out text box to your preferred display size. In the above example, the pop-out window has a screen depth of 150 pixels and a screen width of 300 pixels.

  5. 5

    Scroll to the location on the page where you want to display the hotlink to the pop-out box. This is the link that the visitor clicks to open and display the pop-out text box.

  6. 6

    Copy and paste the following HTML code into the insertion location:

    <A HREF="popout.html" onClick="return popup(this, 'description')">Click Popout</A>

  7. 7

    Highlight and change "description" to your own label for the pop-out box. This is for your own use to help you identify the code for the pop-out box and it will not display to your visitors.

  8. 8

    Highlight and replace "popout.html" with the correct name of the Web page you created to contain the text in the pop-out box. Change the "Click Popout" link text to your own link text -- for example, "Click for more product details."

  9. 9

    Click "File" on the main menu, then select "Save" to save the Web page. Upload the page and the pop-out box page to your Web host's server.

Tips and warnings

  • You can also include images, graphics or multimedia content in a pop-out box. If you display images or graphics, ensure the box is large enough to accommodate the size of the image.

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.