Pop Up Windows with CSS

**muyeshi** · Mar 23, 2009 10:10

I am new to CSS.

How can I create pop-up window? And also a link on the window that when clicked on will shut down the window?

Please help.

Thanks.

**Dr John** · Mar 23, 2009 13:16

<p><a href="javascript:window.close()">Close</a></p>
will close a page, but it's even better to add this line as well
<body onBlur="javascript:window.close()">
which will close it as soon as the user goes elsewhere, and no-one likes having lots of little orphan windows still open.

**Dr. Stavros** · Mar 23, 2009 14:11

"Never pop up any windows, ever" is a pretty good rule of web design.

**felgall** · Mar 23, 2009 14:42

You can only close a window if you opened the window and the same page as you first loaded into the window is still displayed in it.

You can't guarantee that any code will open a new window because where new pages open is completely under the control of your visitors - they may prefer to have it open in a new tab or even the same tab instead and there is no way you can prevent that or tell where they have opened it.

**molona** · Mar 23, 2009 14:44

You can't use only CSS to create a pop-up window, you need Javascript.

to create a pop-up window you will use a link like this

Code:

<a href="http://google.com/" 
   onclick="window.open(this.href, 'popupwindow', width=400,height=300,scrollbars,resizable');
            return false;">
  Text of the link here.
</a>

In this way, the link will always work because the href attribute does have an address.

Remember that pop-ups are unreliable because they have been abused badly. Most browsers come with pop-up blockers and some users have javascript turn off, so don't place any critical information there because your users may not see it. If anything, something that can help them but they don't need to enjoy the site.

**muyeshi** · Mar 25, 2009 05:41

What I want exactly is to put links of other websites on my web page but when clicked I want them to open on a new window.

**iTechno** · Mar 25, 2009 11:53

Originally Posted by muyeshi

What I want exactly is to put links of other websites on my web page but when clicked I want them to open on a new window.

Try using target="_blank" e.g.

Code:

<a href="link.html" target="_blank">Link</a>

**muyeshi** · Mar 26, 2009 04:41

Thank you very much.

**muyeshi** · Mar 26, 2009 06:13

I am designing a portfolio web page. I would like to put a link where by when clicked it opens the main image in a new window in a particular width and height.

Please help....

Thank you.

**molona** · Mar 26, 2009 13:42

Originally Posted by iTechno

Try using target="_blank" e.g.

Code:

<a href="link.html" target="_blank">Link</a>

That's deprecated

**felgall** · Mar 26, 2009 15:11

You are supposed to leave it to your visitors to decide where they want pages to open.

They can choose between same tab, new tab, or new window. You can only suggest new window for if they don't override it with their own choice.

**muyeshi** · Mar 27, 2009 02:22

But can I control the size of the new opened window in terms of width and height?

**Dan Schulz** · Mar 27, 2009 06:31

Ah, "popup" windows with CSS. I take it you're looking for something like this? http://battletech.hopto.org/for_others/ag/template.html

The directory is open, if you want to view the source code.

http://battletech.hopto.org/for_others/ag/

(Note: This is not my site; it belongs to a friend of mine.)

User Tag List

Thread: Pop Up Windows with CSS

Thread Tools

Display

Pop Up Windows with CSS

Bookmarks

Bookmarks

Posting Permissions