How Do I Add a Pop Up Window on a Server?
Website owners occasionally need to display pop-up windows on the pages of their site, often to display important information, accept login credentials or show the status of a pending request. Though the pop-up content is hosted on the Web server, the code that controls the behavior of the pop-up is contained in the Web page itself. As such, adding a pop-up window requires updating the Web page and then uploading that page to the server.
Other People Are Reading
Instructions
-
-
1
Open the Web page on which the pop-up will appear. If you use a visual website-editing program such as Adobe Dreamweaver or Microsoft FrontPage, open the page you want to edit. Locate the spot on the page where the link that controls the pop-up window will be placed, and click once in this area. Switch your viewing setting to "Code View" to see the hyper text markup language, or HTML, that controls this part of the page. If you use a text-editing program such as Notepad or WordPad, open the page you want to edit and locate the section of code where the pop-up window link will be placed.
-
2
Add the pop-up code to your Web page. Create a blank line in your HTML code where the pop-up link will be placed. Copy and paste the following code onto the blank line:
<form>
<input type="submit" value="Click here for a pop-up" onClick="window.open ('popup.html', 'newwindow', 'width=500, height=300, toolbar=no, menubar=no, location=no, status=no, scrollbars=no');">
</form>This sample code creates a button that launches a pop-up window when clicked. However, pop-ups can be launched when nearly any element is clicked, including links, images, and even the page itself when the code is applied to the <body> tag. Simply add the onClick parameter to the HTML tag that triggers the pop-up event.
-
-
3
Adjust the pop-up code parameters. The sample code provided earlier creates a pop-up that displays the content of the "popup.html" page in a window 500 pixels wide by 300 pixels tall. Alter these values within the onClick parameter to fit the needs of your website. The sample pop-up window also appears without a tool bar, menu bar, address bar, status bar or scroll bars. You can turn any of these elements on by changing the "no" value to "yes" within the onClick parameter.
-
4
Save your Web page to confirm your changes.
-
5
Upload the updated page to your Web server. If your website host provides it, use a Web-based uploading utility to transfer the page you just edited from your computer to your server. Otherwise use a computer-based file transfer protocol (FTP) program, such as the free FileZilla program, to log into your website and upload the updated page to your server.
-
6
View your updated page. Open in your Web browser the page that was uploaded in the previous step. Click on the button added in Step 2 to launch the pop-up window.
-
1
References
Resources
- Photo Credit computer image by Orlando Florin Rosu from Fotolia.com
