Get best price on Prepaid Samsung Galaxy A10e | ||||||||||||
|
||||||||||||
|
JavaScript: Popup WindowsThis how-to article about JavaScript popup windows shows you how to create a basic popup window, then shows you how to create several types of more complex popups. You will also get to play with demos and get source code and a reference list of options for popups. Read this how-to article in Spanish language thanks to Maria Ramos from Webhostinghub.com. JavaScript allows you to create (open) new windows. Run whatever HTML code you wish in these windows. You can even have actions in one window effect another window. Example 1: Create a Basic Popup WindowLets learn how to open a new popup window. The code is straightforward. (It gets more complicated when you add different options, and when you navigate around multiple windows.) The code used to open basic popup for Example 1 is: window.open‘win1.html’,‘Window1’,
‘menubar=no,width=430,height=360,toolbar=no’); Looking at the code snippet above, you need to define the following (listed in the order they appear in the code snippet) for your own window:
How To Close Your Popup Window with CodeNow lets close that window with code (not just killing the browser window). If you closed your popup window from above, Open Window Example 1 again. Look towards the bottom of the window. There is a link to “Close this Window.” Here is the code: <a href="javascript:self.close()">close window</a>
This was a really basic, simple example that created an ugly popup window. We focused on the mechanics here. There are lots of ways to make the window look better. At the bottom of this page is a reference of options available to you. Example 2: Interacting With Two WindowsIn this example we change which window currently has the focus. In other words, we use code to set which window is “on-top,” or highlighted.
The code looks like: win2 = window.open("win2.html", "Window2", "width=310,height=600,scrollbars=yes");
To change the focus to a different window, you need to refer to that window. To do so, use the window name followed by the focus() method. To refer to the window that opened this window, use: opener.focus(); Opener is a special JavaScript keyword which refers back to the window that opened the current window. If nothing has been opened, it is not a defined object. Lets see it in action:
If you opened Window Example 2, and clicked the link at the bottom that says Click Here to Change the Focus then you should have returned to this page via the focus change. If you didnt, what are you waiting for? The line of code to change focus is: <a href="javascript:opener.focus()">change focus</a>
We can even close Window Example 2 from this link. Use the following statement: <a href="javascript:(win2.close()">close</a>
Example 3: Writing To a Popup Window From Another WindowYou can open a window. Then, after it has been opened, you can write content into that window from your original window. The best way to clarify is by trying it. Click here to open Window Example 3 After the window opens, switch back to this page and now click here to write some text into our popup window. You may have to switch back and forth between the windows to see that something was written into the popup window. Darn cool. The statements used are:
// open the window
win3 = window.open("", "Window3", "width=320,height=210,scrollbars=yes"); // write to window win3.document.writeln("<h2>This is written to Window 3 by the main window</h2>");
Example 4: Using a Popup for Site NavigationOne possible use of a popup window is for site navigation. You can place links to different sections of a web site in a popup window. While navigating the site, the whole site links are always present. I dont recommend doing this because of usability issues. I like to present it because itoffers a nifty learning tool. It also might generate some better ideas of a good use of popup windows.
When using links in an opened window, you need to reference the ‘opener’ window to have links opened in that window. Do this by writing a function in the opened window which points links to the opener window. This is best shown with an example: Click here for a Navigation Window Example 4 Here is the code:
function openURL(sURL) {
opener.document.location = sURL; } <a href="javascript:openURL('home.html')">Go Home & </a>
Options for JavaScript PopupsWe just worked with really simple looking popup windows. You have numerous options that let you control how they look. Here is a reference:
I hope you found this useful. Be sure to check out my other how-to articles and tutorials.
|
privacy policy || © 1997-2016. astonishinc.com All Rights Reserved. |