SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 63
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML popup code for latest browsers?

    I need solution, a code of java script or anything good in HTML to can make popup HTML browser window with my custom size and centered position on PC screen to work in newest Chrome, IE9 and Firefox on user's click on small flash banner.

    I looked on internet but didn't found solution.

    For now I only found some popup code online generators and that worked fine till now next gen of browsers came with strict anti popup security politic.

    Need help!

    My site is plain HTML 5 with some js and some flash. I like clean HTML with little other dynamic content and techniques so I would like some nice and clean solution for my problem.

    Of course ...I don't wanna to force my site visitors to check or uncheck options in their browsers! I wanna find solution without going to specific browser options! All DEFAULT DEFAULT DEFAULT I need!
    Last edited by Gorgoyle9; Sep 1, 2011 at 14:52. Reason: adding some text

  2. #2
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Pop-ups aren't used much anymore and are typically blocked by pop-up blockers.

    What are you trying to display? In most cases, a lightbox solution might be more appropriate.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Force Flow View Post
    What are you trying to display? In most cases, a lightbox solution might be more appropriate.
    I got on my site some reduced price offer of my client services and on popup HTML browser window I wanna put contact info of company and some text more abt that offer. Nothing aggressive or against web moral rules, nothing forbidden or against the law.

    I also wanna other parts of my website to be always accessible by visitor. I don't wanna popup which need to be turned off to visitor can access other parts on web page. I just need simple HTML browser popup and completely legal solution following latest browsers and web standards.

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,044
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)
    AFAIK all the "box" flavors do require closing before navigation can resume.

    IMHO you should let go of the "pop-up" idea and go with inserting the content into the DOM

  5. #5
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Gorgoyle9 View Post
    I got on my site some reduced price offer of my client services and on popup HTML browser window I wanna put contact info of company and some text more abt that offer. Nothing aggressive or against web moral rules, nothing forbidden or against the law.
    While you seem to be trying to stress the legality of using pop-ups, that's not really the issue. The main issue is that they're annoying to visitors.

    Like Mittineague says, that information might be best placed on the page itself. Possibly as a banner or side banner if you don't want it with the main content.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    You could do a CSS ligtbox or a js one (like fancybox). Seen here

  7. #7
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    You could do a CSS ligtbox or a js one (like fancybox). Seen here
    I agree, and Eric's come up with a snazzy one. 90% of your viewers won't see your pop-up, and the ones who do will be annoyed by it.

    There's also this CSS-only alert box that I cribbed from somewhere but didn't keep track of the source that you might try. It displays a small, configurable "alert box" that displays a larger info box on mouseover. Really more of a fancy tooltip.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Alert Box</title>
    <style type="text/css">
    
    #alertwrap {
    	width:350px;
    	margin:0 auto;
    	padding-bottom:10px;
    	background:#1565c1;
    	border:1px solid #000;
    	text-align: center;
    }
    
    #alertwrap h2 {
    	text-align:center; 
    	background:#1565c1;
    	color: #fff;
    }
    
    #alertwrap p.tooltip {
    	position:relative;
    	padding-top:0;
    	text-align:center;
    	background:#fff;
    	font-weight: 700;
    }
    
    #alertwrap p.tooltip a {
    	color: #c75300;
    	text-decoration:none;
    }
    
    * html p.tooltip, 
    * html p.tooltip a:hover {
    	display:inline-block;
    }
    
    #alertwrap p.tooltip a span {
    	position:absolute;
    	width:300px;
    	top:-50px;
    	left:20%;
    	margin-left:-62px;
    	padding:15px;
    	visibility:hidden;
    	background:#fff;
    	border:2px solid #c75300;
    	color:#1565c1;
    	font-size:.9em;
    }
    
    #alertwrap p.tooltip a:hover span {
    	visibility:visible;
    }
    
    </style>
    </head>
    <body>
    
    <div id="alertwrap">
        <h2>Headline</h2>
        <p class="tooltip"><a href="contact.html" title="contact link">More information &hellip;<span>Info displayed on rollover. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></a></p>
    </div>
    
    </body>
    </html>

  8. #8
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you all guys not understand me. This popup it's not annoying cause it activates on mouse click. To make you clear I'll give you my client site and how that look. It can be viewed atm only in firefox with default settings latest FF release. My FF is 6.0.1

    ?EVA-Po?etna strana

    Look that flash in firefox and click on it! It shows popup which is very cool, user can click anywhere on site around, not blocked and annoyed as you all say. User can move to side that popup window or turn off my very friendly popup, can read what it writes there or not. Very user friendly and not annoying.

    Solutions you gave me all blocking user from klicking around except on "X-Close button" which pretty sux if we look user positive experience of visiting some site.


    And 1 thing more! I'm not "web trendy" guy. I mot going for trends than for quality and really good user experience. I'm not a coder... I'm more "designer for ppl" not for web trends.

  9. #9
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    One big problem that you'll find is that increasingly, browsers are allowing users to open links (including pop-ups) in new tabs rather than new windows, and in anything other than Opera that means your pop-up will open as a full-size page rather than centred and at the size you've specified – that's assuming it isn't blocked, of course.

  10. #10
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    One big problem that you'll find is that increasingly, browsers are allowing users to open links (including pop-ups) in new tabs rather than new windows, and in anything other than Opera that means your pop-up will open as a full-size page rather than centred and at the size you've specified – that's assuming it isn't blocked, of course.
    No! Wrong. I open new Chrome and new IE9 and nada! Wont popup in HTML browser window. Atm only work in Firefox. Very bad and since I started webdesign i see some thing which I not like! It's abt web standards and HTML language but this topic is not abt that. I need simple HTML browser popup. Help!

  11. #11
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    The closest thing to a HTML browser popup is what I posted. I assume your looking for a js popup. Google it there are hundreds. Or I have one one my site. Or reword what you want because I am still not clear. Nor did I find any popups in the flash section.

  12. #12
    Chive On FFCus's Avatar
    Join Date
    Feb 2006
    Location
    Connecticut
    Posts
    542
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Gorgoyle9 View Post
    I'm more "designer for ppl" not for web trends.
    Saying that and wanting to use popup windows is a contradiction.

    At any rate, in order to help you, take a look at this page for a tutorial.

    JavaScript Popup Windows

  13. #13
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by FFCus View Post
    At any rate, in order to help you, take a look at this page for a tutorial.

    JavaScript Popup Windows
    I got that "A Better Script" implemented in my pages already but since got new Chrome and IE9 they not showing that script with "var popupWindow = null;...etc" code.

    For guy above which not see popoup window on my webiste flash banner on far right column, in FIREFOX, I suggest to maybe better read what I wrote so far to not repeating myself.

    Saying that and wanting to use popup windows is a contradiction.
    It's not contradiction cause it's not aggressive and annoying. It popups on click and it's quite friendly, you can turn it off once for all times an dnot click it again! Ok now?

    If you personally got something against popups then you prolly had bad experience with those but my browser doing his job good and i didnt had so much problems with popups in my life. If you don't like popups like "Web designer" cause of some professional reason then I think it's just your right to keep that as your personal attitude.

    I like it in my project and it's very useful.

    For people which not see or can't see my popup i made a screenshot here:mypopup

  14. #14
    Chive On FFCus's Avatar
    Join Date
    Feb 2006
    Location
    Connecticut
    Posts
    542
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Gorgoyle9 View Post
    If you personally got something against popups then you prolly had bad experience with those...
    You figured me out. I clicked on a popup once and a gremlin hopped out of the screen and bit my big toe off. Now I can't wear flip-flops.

    The information you are seeking is widely available through a Google search and a little bit of work on your part.

  15. #15
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by FFCus View Post
    You figured me out. I clicked on a popup once and a gremlin hopped out of the screen and bit my big toe off. Now I can't wear flip-flops.

    The information you are seeking is widely available through a Google search and a little bit of work on your part.
    Look my 1st post (topic created post!) I wrote that I checked Google already, implemented js popup code but new browsers not showing it except FF!

    I'm asking here ppl from Sitepoint... cause I see this Sitepoint "network" is... I think... filled with experienced people and web developers so my search for solution will be quicker.

    I also wanna point out this new browsers "feature" of blocking everything which is big fail in security giving world spammers 0:1 score for world spammers... if you asking me and when we talk abt HTML development and WC3 standards which all browsers should follow and interpretate right, blocking of every popup by latest browsers releases showing that developers of web browsers gave up on security from defense of unwanted popup windows.

    I think this site-forum many good developers read and will find this problem and resolve it in some near future.

    I just ask if there-here some guy which got maybe solution for new actual problem. That's all I ask. I found old JS scripts abt this but THEY NOT WORK ANYMORE!

    I need new solution, some part of code or new latest browsers updates with new patches!

    Some ppl here posted some galleries and lightbox solutions but they not giving to web site visitor full freedom like simple plain HTML popup.
    maybe if I had lightbox solution to not block whole screen and allowing to user move that popup window. That would be cool then if latest browsers allowing that ofc.

  16. #16
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    The problem is that the technique has been largely abandoned. It's annoying to users, and modern browsers don't always handle it properly or even display it at all.

    The lightbox solutions which some of the folks mentioned are generally more acceptable to use and work better with modern browsers.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  17. #17
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    use this code
    Code:
    <script language="javascript">
    window.open('http://your site.com ','','width=350,height=200')
    </script>
    put the code in body not head. it works with chrome and ie.

  18. #18
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by hostlistman View Post
    use this code
    I don't think it's a matter of not knowing how to code a popup, it's the UX issue. SP's Ian Lloyd wrote about it in 2002, and his arguments against the popup are even more valid now than they were then. In that article, he suggests a version that is a bit better, but nowadays popups have been almost entirely superseded except in very particular circumstances. The consensus is, I think, not to use the damn things.

  19. #19
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

  20. #20
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    I think you can safely go the way of using lightbox variations! As they are widely spread and used! -You need to choose a good one though-

    We had a similar discussion about this matter in my company to decide what solution we should 'standardly' implement for the small and medium web projects we develop!
    We created our own lightbox variation and we're using it efficiently during the last couple of months!
    Here are some articles and resources that helped us build a Usable, practical and accessible box:

    - Modal Windows In Modern Web Design - Smashing Magazine
    - The Trouble with Lightbox (and its Variants) - Monday By Noon
    - 30 Efficient jQuery Lightbox Plugins

  21. #21
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,023
    Mentioned
    62 Post(s)
    Tagged
    0 Thread(s)
    A site that uses pop ups is like a vacuum cleaner salesman that comes to your house and pours a sack of dirt on your carpet to demo his product without being asked. Rude as Hell. I will not buy products from any site that uses pop-ups. That's the main reason I refuse to use Netflix - they go out of their way to exploit glitches in browsers to get pop-ups to work. I know I'm not the only user that closes the whole page when it fires an unwanted pop-up.

    About the only use I have for popups is for file uploads since AJAX doesn't allow file transfer (yet). Even that I do rarely.

  22. #22
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,146
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Sounds like your goals would be best served with a modal window. Depending on the amount of content that will be displayed in the modal you could really go one of two ways.

    The first would be to use the :target pseudo selector to hide and show the modal. The disadvantages of that will be that for every item that has a modal its modal content will need to be served on the same page. Depending on the amount of information in each modal that could be a significant amount of information to load per seach item. The other downfall is that a JavaScript work around will be required in IE6 as it does not support the :target pseudo selector. The advantages though are that it is probably a simpler solution and more directly accessible to all users without additional work arounds.

    The second solution will be to use JavaScript to load the information via AJAX and replace content in a single modal window when items are clicked. The primary advantage here is that the browser will not need to load information that may not be seen, perhaps significantly reducing page weight depending on the amount of extra content. Though the big disadvantage would be an alternative work around will be needed for users with JavaScript disabled but it could be as simple as open the information in a new page. So users with JavaScript enabled would have the nice, modal experience where those without it enabled would get a new page.

    I myself would probably go with second method since its more flexible then using CSS :target. Modals increase the user experience ten fold when used in right situations properly (ie. without ads).
    The only code I hate more than my own is everyone else's.

  23. #23
    Error 404: Life not found silver trophybronze trophy
    Join Date
    Dec 2007
    Location
    UK Nr Manchester
    Posts
    3,460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol! As soon as someone asks about pop-up code, out come the soap boxes and the purists can't resist giving their opinion on the evil of pop-ups.

    Every. Single. Time.

    Here's some code
    for one you could try out.
    It's 530 people, but do you really get it?
    ImgWebDesign - Web design in Buxton, High Peak, Derbyshire UK.

  24. #24
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,023
    Mentioned
    62 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JJMcClure View Post
    lol! As soon as someone asks about pop-up code, out come the soap boxes and the purists can't resist giving their opinion on the evil of pop-ups.

    Every. Single. Time.

    Here's some code
    for one you could try out.
    Rude is as rude does I suppose. Welcome to the killfile.

  25. #25
    Error 404: Life not found silver trophybronze trophy
    Join Date
    Dec 2007
    Location
    UK Nr Manchester
    Posts
    3,460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:



    Quote Originally Posted by Michael Morris View Post
    Rude is as rude does I suppose. Welcome to the killfile.
    I don't really know what that means but since the OP asked for a solution and not for your opinion on pop-ups, I'm wondering if you're talking about yourself?

    Last edited by Dark Tranquility; Sep 5, 2011 at 12:23.
    It's 530 people, but do you really get it?
    ImgWebDesign - Web design in Buxton, High Peak, Derbyshire UK.


Tags for this Thread

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
  •