Jump to content

How to i create popup?


noahwilson

Recommended Posts

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>

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

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 :o

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.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.