How does one have multiple modal forms on a page using jQuery UI?

Question

I need to have multiple buttons each popping up a different modal form using jQuery UI. Is this possible? How?

Answer 1

Yes, it's possible.

Just give your dialog elements different id's.

Example:

html:

<div id='d1' title='Hi1' style='display:none'>Hi from dialog 1</div>
<div id='d2' title='Hi2' style='display:none'>Hi from dialog 2</div>

<button id='b1'>Open dialog 1</button>
<button id='b2'>Open dialog 2</button>

javascript (on document ready event):

$('#b1').click(function() {
    $('#d1').dialog({modal: true});
});

$('#b2').click(function() {
    $('#d2').dialog({modal: true});
});