Popups and unstoppable popups

Pop-up

Popup example
Popup example

We like them and we hate them. But they are useful. One of the main uses of a popup is to present something special: a picture, an important message, a tip, a subscription form.

A popup, a real popup that is, opens in another window. The classic JavaScript code is:

window.open ('URL', 'Window_name', 'Window_options');

An unstoppable pop-up is not a real popup, it simply looks like a popup.

What is a real popup?

A popup is a secondary window that appears, sometimes without having been requested by the user, in front of the main browser window while one is browsing the Internet.

This method was commonly used to display advertisements or warning such as the response to a message in a private forum. However, some sites are designed on the principle of a regular page containing a background image and a link like "enter" which opens the site itself, which is actually designed in a window-type popup.

Some sites contain special features (often in Adobe Flash) like an audio or video interface requires the use of the popup window system, since these features will usually launch in a popup window.

The "classic" popup opens in a new browser window. However, due to the plethora of popup blocker software, new techniques are now used to circumvent protections. Flash or DHTML within the web page is now used to simulate popups.

Modal or modeless pop-up window?

Modal windows open over the application and do not allow the user to click on the window located "below" (window behind the opening of the popup). The popup myust be closed in order to access the application again, the normal browser window.

In JavaScript (Internet Explorer), to open pop-ups with the modal function:

window.showModalDialog (url, winParams, options);

Non-modal windows open over the application, but since they allow the user to click on the window below, "they can go" behind" the application at any time.

In JavaScript (Internet Explorer), we can open a non-modal popup with this function:

window.open (url, "", options);

Both types of windows have different properties in terms of their size and position. The non-modal popup has a reference to the window that called it, the "opener". That “opener” reference does not exist in the modal case. We can avert this shortage by passing the reference to the modal popup window with: "this" or "window".

Example:

window.showModalDialog (url, window, options);

and in the script of the pop-up, you get the reference with the dialogArguments:

if (window.dialogArguments) (window.opener = window.dialogArguments;)

All of this would work if it weren’t for the popup blockers. The popup blockers block the automatic opening of windows, but the popup blockers will not block the opening of a window if the opening is made through a link on which the user must click.

Click here for a free pop-up tool that will make the JavaScript pop-up window link code automatically for you.

What is an unstoppable popup?

The other pop-ups, or the unstoppable pop-ups, are, in fact, done with dhtml code. The dhtml is dynamic html. Dynamic html is collection of technologies used together to create interactive and animated web pages by using a combination of a static markup language (HTML), a client-side scripting language (JavaScript), and a presentation definition language (such as CSS). By using these technologies we can manipulate the static elements of a web page.

An unstoppable popup is a popup that does not use the JavaScript code window.open to open a new window, it uses JavaScript to manipulate the styles in the web page.

Unstoppable popup dhtml code example:

<div style="z-index: 99; display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%" id="popup">
            <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%">
                        <tr>
                                    <td align="center">
                                                <div style="width: 300px; height: 300px; border: 1px solid #000000; background: #FFFFFF"><p>And now we still have a nice 300x300 window</p>
<p><div onclick="document.getElementById('popup').style.display = 'none'">close this popup</div></p>
</div>
                                    </td>
                        </tr>
            </table>
</div>

<div onclick="document.getElementById('popup').style.display = 'block'">show the popup</div>

We can even put a "semi transparent" effect around the “pop-up” by doing:
 
<div style="z-index: 99; display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%" id="popup">
            <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%; background: url('semitransparent.gif')">
                        <tr>
                                    <td align="center">
                                                <div style="width: 300px; height: 300px; border: 1px solid #000000; background: #FFFFFF"><p>And now we still have a nice 300x300 window</p>
<p><div onclick="document.getElementById('popup').style.display = 'none'">close this popup</div></p>
</div>
                                    </td>
                        </tr>
            </table>
</div>

On your web page put:
<div onclick="document.getElementById('popup').style.display = 'block'">show the popup</div>
to show the popup

and to close the window put
<div onclick="document.getElementById('popup').style.display = 'none'">close this popup</div>
in the popup.

Click here for a more advanced unstoppable creator.

Comments 3 comments

Digital Extreme Media Group 6 years ago

Thanks for sharing. Nice script!


haemophilus influenzae 5 years ago

So this is how pop up works

Thanks for the script


Hbhanot 3 years ago

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working