<zk>
    <window id="win" title="Hi!" border="normal" width="200px">    
        <caption>        
            <toolbarbutton label="Close" onClick="win.setVisible(false)"/>            
        </caption>        
        <checkbox label="Hello, Wolrd!"/>        
    </window>    
        
    <button label="Overlap" onClick="win.doOverlapped();"/>    
    <button label="Popup" onClick="win.doPopup();"/>    
    <button label="Modal" onClick="win.doModal();"/>    
    <button label="Embed" onClick="win.doEmbedded();"/>    
    <button label="Highlighted" onClick="win.doHighlighted();"/>    
</zk>

埋め込みウィンドウは他のコンポーネントと一緒にテキスト間(インラインで)に位置させます。このモードでは位置がブラウザによって決められるので、位置を変更することはできません。

オーバーラップウィンドウは他のコンポーネントを重ねます。ユーザーはドラッグすることができ、開発者はsetLeftとsetTopメソッドによって位置を決めることができます。

doOverlappedに加えて、以下のようにmodeプロパティを使用することができます。

<window title="My Overlapped" width="300px" mode="overlapped">
</window>

ユーザーがポップアップウィンドウとその子ウィンドウを除いた他のどのコンポーネントをクリックし、自動的にウィンドウが閉じられていしまう場合を除い て、ポップアップウィンドウはオーバーラップウィンドウと同じ働きをします。
名前のとおり、ウィンドウのポップアップを実装するために設計されています。

モーダルウィンドウ(aka.,モーダルダイアログ)はendModal、 doEmbedded、 doOverlapped、 doHighlighted、 doPopupメソッドのうちの一つが呼び出されて実行が中断されている場合を除いてオーバーラップウィンドウと同様の働きをします。

実行中断に加えて、モーダルウィンドウに所属していないコンポーネントを使用不可にします。

モーダルウィンドウは自動的にブラウザの中心に位置されます。位置変更はできません。

ハイライトウィンドウは視覚的な効果がモーダルウィンドウと同じであること以外はオーバーラップウィンドウと同じです。つまり、ハイライトウィンドウはブラウザの中心に位置され、ハイライトウィンドウに属していないコンポーネントは一時的に無効になります。

しかし、実行の中断はしません。オーバーラップウィンドウのように、モードが変更されると実行は次のステートメントへ継続されます。例えば、f1()はwin1が閉じた後にのみ呼び出されます。一方で、g()はwin2がハイライトされたすぐ後に呼び出されます。

win1.doModal(); //the execution is suspended until win1 is closed

f1();

win2.doHighlighted(); //the execution won't be suspended
g1()

イベントプロセススレッドを中断したくない、使用したくない場合、モーダルウィンドウではなくハイライトウィンドウを使いましょう。上級者のための機能のサーブレットを使用してイベントを処理セクションを参照してください。

他のモードとは違い、イベントリスナの中ではウィンドウをモーダルモードにしか指定できません。つまり、イベントリスナ中でdoModal()又はsetModal(“modal”)を呼び出すことができます。

<zk>
    <window id="wnd" title="My Modal" visible="false" width="300px">    
        <button label="close" onClick="wnd.visible = false"/>        
    </window>    
    <button label="do it" onClick="wnd.doModal()"/>    
</zk>

コンポーネント作成段階中[38]で以下に書かれたプログラムを実行する場合、間違っています。

//t1.zul
<window title="My Modal" width="300px" closable="true" mode="modal">
</window>

直接参照する場合、以下の結果[39]が得られます。

以下のコードは同じ結果を出します。

//t2.zul
<window title="My Modal" width="300px" closable="true">
    <zscript>    
        self.doModal();        
    </zscript>    
</window>

ページ読み込み中にモーダルウィンドウの作成が必要なら、以下のようにonModalイベントをポストできます。

//t3.zul
<window title="My Modal" width="300px" closable="true">
    <zscript>    
    Events.postEvent("onModal", self, null);    
    </zscript>    
</window>

【メモ】:t1.zulがウィンドウモードを直接モーダルに設定していても(上に示したように)以下のコードは正確に実行されます。どうしてでしょうか？それは(onClick用の)イベントリスナの中で実行されるからです。

<button label="do it">
    <attribute name="onClick">    
    Executions.createComponents("t1.zul", null, null);    
        //it loads t1.zul in this event listener for onClick        
    </attribute>    
</button>