noahwilson Posted May 10, 2013 Share Posted May 10, 2013 Hello everybodyLook like the title, i have a question: How to create popup. please share your suggestion.Thanks Quote Link to comment Share on other sites More sharing options...
Irate Posted May 10, 2013 Share Posted May 10, 2013 Create a popup with JavaScript. Like this... <button onclick="window.open('http://example.com');">Click here to open a new window.</button> Quote Link to comment Share on other sites More sharing options...
gristoi Posted May 10, 2013 Share Posted May 10, 2013 irate: that is not a popup, that is a new window. if you want a popup you are more than likely referring to some form of modal dialog. Have a google for jquery modal dialog, or bootstrap dialog. that will give you a good starting point Quote Link to comment Share on other sites More sharing options...
Irate Posted May 10, 2013 Share Posted May 10, 2013 Right, he asked for a popup, not for a new window. Ahah. Try this, then. <!DOCTYPE html> <html> <head> <script type="text/javascript"> function popup(url) { new_popup = window.open(url, "Popup Window", "width=400,height=300,resizable=yes"); new_popup.focus(); return false; }</script> </head> <body> <a target="_blank" onclick="return popup('http://example.com');">Open new Popup.</a> </body> </html> Quote Link to comment Share on other sites More sharing options...
gristoi Posted May 10, 2013 Share Posted May 10, 2013 Again, Irate, I am afraid that this is not really a popup, it is 2013, not 2003. people tend not to use secondary windows for popups nowadays. With the advancement in client side languages and the common use of ajax the need for this style of 'popup' is now defunct. you don't need to use onclick= within the elements any more, in fact the prefered method is not to have any javascipt in the html at all and bind an event listener to an element and inject what is needed into the DOM. below is a quick example of a jquery dialog ( popup ): <html> <head> <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"></link> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> </head> <body> <button id="myButton">Click Me To Open Dialog</button> <div id="dialog-message" title="Im the title" style="display:none"> <div style="margin-left: 20px;"> <p> Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. <br /><br /> Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. </p></div> </div> <script> $(document).ready(function(){ $('#myButton').on('click',function(){ $("#dialog-message").dialog({ modal: true, draggable: true, resizable: false, position: ['center', 'top'], show: 'blind', hide: 'blind', width: 400, buttons: { "Click me to close dialog": function() { $(this).dialog("close"); } } }); }); }); </script> </body> </html> Hope this helps Quote Link to comment Share on other sites More sharing options...
annaharris Posted May 16, 2013 Share Posted May 16, 2013 Check out given link that contains information about How to Make a Pop-up Window. http://www.learningmovabletype.com/a/000326popup_window/ Quote Link to comment Share on other sites More sharing options...
gristoi Posted May 16, 2013 Share Posted May 16, 2013 annaharris: this link is nearly a decade old. and as i stated in my previous post, is a redundant way of doing things. the post was posted APRIL 16, 2004 Quote Link to comment Share on other sites More sharing options...
DarkKnight2011 Posted May 16, 2013 Share Posted May 16, 2013 hi, To get an additional window to appear that will show content from another URL then yes, you could use something like window.open(url, "Popup Window", "width=400,height=300,resizable=yes"); Although, As gristoi stated, this is a very old (and also annoying) way of showing information even if it's not intended for advertisements, the code provided by gristoi can be used to popup a form or some other small information on the current page the user is viewing, Which is much preferrred. And yeah, Inline javascript.... eeeeeewww Quote Link to comment Share on other sites More sharing options...
haku Posted May 20, 2013 Share Posted May 20, 2013 Wow, four times people posted either window.open() or a link to an article that uses window.open() to create a new window. Three times Gristoi mentioned that that method is extremely outdated, and yet someone still posted it.Let me help you people: WINDOW.OPEN() IS OUTDATED AND A DECADE OLD. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.