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:
Easy

Other People Are Reading

Instructions

  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;

    else

    href=mylink.href;

    window.open(href, windowname, 'width=300,height=150,scrollbars=no');

    return false;

    }

    //-->

    </SCRIPT>

  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

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

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