SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pop Up Windows with CSS

    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.

  2. #2
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    <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.

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2009
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "Never pop up any windows, ever" is a pretty good rule of web design.
    Learn all about diamonds,
    Check out some period-drama movies and TV series,
    Or get festive with The Wonder of Christmas.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    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.

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    The I's for intelligent silver trophy iTechno's Avatar
    Join Date
    Jan 2006
    Location
    Yorkshire, UK
    Posts
    1,796
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by muyeshi View Post
    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>

  8. #8
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much.

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by iTechno View Post
    Try using target="_blank" e.g.

    Code:
    <a href="link.html" target="_blank">Link</a>
    That's deprecated

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  12. #12
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But can I control the size of the new opened window in terms of width and height?

  13. #13
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •