How to open 2 model dialog - only the top one is active?

I'm doing a VB->Ajax project.
The old VB program always show 2 or 3 model dialog at the same time, but only the top dialog is active.
The "dijit.Dialog" can not support this??

Here is my source code.
It shows a "First" dialog. At the "onclick" event handle of "First" dialog's button, it shows the "Second" dialog.
Both 2 dialogs were showed, active and can be moved. Both 2 text box can be inputed.

How can I open 2 model dialog at the same time, only the top dialog is active, the other dialogs can not be draged, moved and inputed?

---------------------------------------------------------

<html>
<head>
<title>Show 2 model dialog demo</title>
    <style type="text/css">
        @import "./dijit/themes/tundra/tundra.css";
        @import "./dojo/resources/dojo.css";
    </style>
    <script type="text/javascript" src="./dojo/dojo.js" djConfig="parseOnLoad: true"></script>
    <script type="text/javascript">
       dojo.require("dijit.form.Button");
       dojo.require("dijit.Dialog");
       dojo.require("dijit.form.TextBox");
     </script>
</head>

<body class="tundra">
<button dojoType="dijit.form.Button" onclick="dijit.byId('dialog1').show()">Show dialog</button>
<div dojoType="dijit.Dialog" id="dialog1" title="First Dialog">
    <input dojoType="dijit.form.TextBox" name="input1"></input>
     <button dojoType="dijit.form.Button" onclick="dijit.byId('dialog2').show()">Show second dialog</button>
</div>

<div dojoType="dijit.Dialog" id="dialog2" title="Second Dialog">
    <p>This is the second dialog.</p>
    <input dojoType="dijit.form.TextBox" name="input2"></input>
</div>

</body>
</html>

Search

How to open 2 model dialog - only the top one is active?