jQuery: how to open a dialog window

Question

I have a button in a my webpage; my expectation is when I click the button, it prompts a dialog window; in the dialog window, it has yes/no button; if I click yes, it opens a new page (gereated by php); if I click no, I stay on the old page. How can I do that?

<input type="button" name="terminate" value="terminate" id="terminate" title="Terminate"  onclick="terminateIt();"/>

look at the jQuery dialog - it is part of the jQuery UI library. — Ilia G, Dec 06 '11 at 05:04
Not sure why this is a jQuery question. Sounds like you want to pop a 'confirm dialog' using an onclick inline event handler. Pure (even if not particularly good) JavaScript! — Greg Pettit, Dec 06 '11 at 05:04
Search in google, how to create dialog window. There so many answer for your question. — Idham Perdameian, Dec 06 '11 at 05:06

score 4 · Accepted Answer · answered Dec 06 '11 at 05:05

4

There are innumerable ways to do this.

Probably the most common way would be to use jQuery UI's Dialog.

They have an example in their demo of a dialog with two buttons. Here is a snipped from that demo:

HTML:

<div id="dialog-confirm" title="Empty the recycle bin?">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Your question goes here. Are you sure?</p>
</div>

JS:

    $( "#dialog-confirm" ).dialog({
        resizable: false,
        height:140,
        modal: true,
        buttons: {
            Yes: function() {
                window.open(....);
                $( this ).dialog( "close" );
            },
            No: function() {
                $( this ).dialog( "close" );
            }
        }
    });

Check out the whole jQuery UI library. Tons of great stuff making it easy to do some basic things.

answered Dec 06 '11 at 05:05

Steve

31,144
19
99
122

thank you very much! I will take a look at the jQuery UI dialog! – Gary Dec 06 '11 at 05:08
@Gary - You are very welcome. BTW, looks like you are new to Stack Overflow... If you like my answer the best, I'd be very appreciative if you'd check off the little green checkbox under the up/down voting buttons - which will mark it as the "Accepted" answer. You might want to go back and do this for your other 3 questions as well. Cheers!! – Steve Dec 06 '11 at 05:09
1

I don't see why he'd need to use jQuery UI (which also requires jQuery, mind you) to do something so simple... – Purag Dec 06 '11 at 05:11
@Purmou - Well, he already said he's using jQuery, and the built-in `confirm` box usually doesn't meet the requirements of 2010's graphics artists. But, you're absolutely right... if he's OK with the system-style `confirm`, then go for it! He did say that he wants "Yes" and "No" buttons, which `confirm` doesn't allow for... usually just less-than-ideal user experience. – Steve Dec 06 '11 at 05:12
@Steve: Absolutely, it's a compromise between visual quality and simplicity. A style choice must be made. :P – Purag Dec 06 '11 at 05:14
Agree with Steve... jQuery UI (JS plus sort-of-optional CSS) along with jQuery itself is awfully heavy for this task. I would only go this way if I were not only using jQuery already, but also planning to use jQuery UI throughout my application. I don't favour rolling a custom jQuery UI package until I'm using at least a couple of its interactions, a widget or two, and a Themeroller theme. – Greg Pettit Dec 06 '11 at 06:27

score 2 · Answer 2 · answered Dec 06 '11 at 05:06

2

function terminateIt(){
    var r = confirm("Go to new page?");
    if( r == true ){
        // redirect stuff here
    } else {
        // non redirect stuff here 
    }  
}

answered Dec 06 '11 at 05:06

Purag

16,941
4
54
75

@Gary - same comment goes for Purmou's answer... if you like it, accept it! Have fun! – Steve Dec 06 '11 at 05:13

jQuery: how to open a dialog window

2 Answers2

Linked