How to Make a Pop Out Text Box in HTML
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.
Other People Are Reading
Instructions
-
-
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
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
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
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
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
Copy and paste the following HTML code into the insertion location:
<A HREF="popout.html" onClick="return popup(this, 'description')">Click Popout</A>
-
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
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
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.
-
1
Tips & 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.
References
Resources
- Photo Credit Comstock/Comstock/Getty Images
