<?xml version="1.0" encoding="UTF-8"?>
<section>
  <sectioninfo>
    <keywordset>
      <keyword>rich:modalPanel</keyword>
    </keywordset>
  </sectioninfo>

  <section>
<title>Description</title>
    <para>The component implements a modal dialog window. All operations in
    the main application window are locked out while this window is active.
    Opening and closing the window is done through client JavaScript
    code.</para>

    <figure>
      <title>The <emphasis role="bold"><property>&lt;rich:modalPanel&gt;</property></emphasis> component opens in closest to observer layer. 
	  All other layers are dimmed by blocking <code>&lt;div&gt;</code> element (gray on the picture).</title>

      <mediaobject>
        <imageobject>
          <imagedata fileref="images/modalPanel_init.png" />
        </imageobject>
      </mediaobject>
    </figure>
  </section>

  <section>
    <title>Key Features</title>

    <itemizedlist>
      <listitem><para>Highly customizable look and feel</para></listitem>
      <listitem><para>Support of draggable operations and size changes by you</para></listitem>
      <listitem><para>Easy positioning for the modal dialog window</para></listitem>
      <listitem><para>Possibility to restore of the previous component state on a page (including position on the screen) after submitting and reloading</para></listitem>
    </itemizedlist>
  </section>
</section>