Pop Ups

ISRdesign · # 1 (**permalink**)

JavaScript popups are very useful, allowing you to provide additional information or functionality on a page without navigating away from it. JavaScript popups are very easy to implement, and you can customize them to some extent. The basic syntax of a JavaScript popup is window.open('popup.html'). This creates a new window, opening popup.html from the current directory.
By specifying additional parameters you can control the width, height, position, toolbars and more.
The Basic Popup
The javascript:

Code:

    function basic_popup()   
    {   
    window.open("popup.html", "My Popup");   
    }

Implementing it with HTML:

HTML Code:

<a href="#" onclick="basic_popup();">Click here to open popup</a>

This is the most basic popup window. It does not specify the window size or any other settings, and is basically the same as opening a link in a new window.
Controlling the size of your popup
The javascript:

Code:

      function fixed_sized_popup()   
    {   
    window.open("my_popup.html","PopupWindow","menubar=1,resizable=1,width=250,height=350");   
    }   
    
    // custom width and height   
    function custom_sized_popup(width, height)   
    {   
    window.open("my_popup.html","PopupWindow","menubar=1,resizable=1,width=" + width + ",height=" + height);   
    }

Implementing it with your html

HTML Code:

<a href="#" onclick="fixed_sized_popup();">Click here to open popup #1</a> <a href="#" onclick="custom_sized_popup(250, 350);">Click here to open popup #2</a>

This second method shows you how to control the size of the popup, the second example letting you specify the width and height of the popup.
Moving a popup window to a location on the screen
You can use the window.moveTo function to move the popup window where you like on the screen.
The code below shows the sized popups from above, with an extra line controlling where the popup sits on the screen.

Code:

      function fixed_sized_topleft_popup()   
    {   
    mypopup = window.open("my_popup.html","PopupWindow","menubar=1,resizable=1,width=250,height=350");   
    mypopup.moveTo(0,0); // top left   
    }   
    
    // custom width and height   
    function custom_sized_centered_popup(width, height)   
    {   
    mypopup = window.open("my_popup.html","PopupWindow","menubar=1,resizable=1,width=" + width + ",height=" + height);   
    
    // calculate the center of the page   
    x = (screen.availWidth - width) / 2;   
    y = (screen.avaiHeight - height) / 2   
    
    // move to the center of the page   
    mypopup.moveTo(x, y);   
    }

An example page
In case you're not sure how to use this in your html page, here's a demo!

Code:

   <html>    
  <head>    
  <title>JavaScript Popups by Stupidkid.Net</title>    
  </head>    
  <script type="text/javascript">    
    
    // our basic popup   
    function basic_popup()   
    {   
    window.open("popup.html", "My Popup");   
    }   
    
    // fixed size width and height   
    function fixed_sized_popup()   
    {   
    window.open("my_popup.html","PopupWindow","menubar=1,resizable=1,width=250,height=350");   
    }   
    
    // custom width and height   
    function custom_sized_popup(width, height)   
    {   
    window.open("my_popup.html","PopupWindow","menubar=1,resizable=1,width=" + width + ",height=" + height);   
    }   
    
    // fixed size, positioned top left   
    function fixed_sized_topleft_popup()   
    {   
    mypopup = window.open("my_popup.html","PopupWindow","menubar=1,resizable=1,width=250,height=350");   
    mypopup.moveTo(0,0); // top left   
    }   
    
    // custom size, centered popup   
    function custom_sized_centered_popup(width, height)   
    {   
    mypopup = window.open("my_popup.html","PopupWindow","menubar=1,resizable=1,width=" + width + ",height=" + height);   
    
    // calculate the center of the page   
    x = (screen.availWidth - width) / 2;   
    y = (screen.avaiHeight - height) / 2   
    
    // move to the center of the page   
    mypopup.moveTo(x, y);   
    }   
     
  </script>    
  <body onload="javascript: poponload()">    
  <h1>JavaScript Popups<hr /></h1>    
  <a href="#" onclick="basic_popup();">A basic popup</a>    
  <a href="#" onclick="fixed_sized_popup();">A popup with a fixed width and height</a>    
  <a href="#" onclick="custom_sized_popup(300, 200);">A popup with a custom width and height</a>    
  <a href="#" onclick="fixed_sized_topleft_popup();">A popup on the top left of the screen</a>    
  <a href="#" onclick="custom_sized_centered_popup(400, 150);">A popup centered on the screen</a>    
  </body>    
  </html>

As you can see, it's very simple to put popups in your page!

Author's URL: script essay mba press release at dannyscripts.com

jackjack · # 2 (**permalink**)

Pop-up ads or popups are a form of online advertising on the World Wide Web intended to attract web traffic or capture email addresses.
It works when certain web sites open a new web browser window to display advertisements.