causeway-standard-theme/causeway/docs/components/dialogue.html

<div>
  <a id="dialog-box"></a>
  <header class="content-header">
    <h1 class="title">
      Dialog box
    </h1>
  </header>

  <p>
    Buttons comprise of a base structure containing the dialog contents in header, body and footer sections.
  </p>
  <p>
    The header contains the title of the dialog box along with an optional close button. The footer is the ideal place to put the relevant action buttons while the body contains the detail of the event.
  </p>

  <div class="bs-example-modal">
    <div class="modal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4>Dialogue Title</h4>
          </div>
          <div class="modal-body">
            Dialogue body content
          </div>
          <div class="modal-footer">
            <a href="javascript:void(0);" data-dismiss="modal">Cancel</a>
            <button type="button" class="btn btn-default">
              Save
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <header class="content-header">
    <h2 class="title">Usage</h2>
  </header>

    <p>The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds <code>.modal-open</code> to the <code>&lt;body&gt;</code> to override default scrolling behavior and generates a <code>.modal-backdrop</code> to provide a click area for dismissing shown modals when clicking outside the modal.</p>


    <h4  class="title">Via data attributes</h4>
    <p>Activate a modal without writing JavaScript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.</p>
    <div class="highlight">
      <pre><code class="html">
        &lt;button type=&quot;button&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;Launch modal&lt;/button&gt;
      </code></pre>
    </div>

    <h4  class="title">Via JavaScript</h4>
    <p>Call a modal with id <code>myModal</code> with a single line of JavaScript:</p>
    <div class="highlight">
      <pre><code class="js">$(&#39;#myModal&#39;).modal(options)
      </code></pre>
    </div>


  <header class="content-header">
    <h2 class="title">
      Options
    </h2>
  </header>

  <p>
    Options available from the standard bootstrap installation; reproduced here for convenience.
  </p>
  <p>
    Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".
  </p>

  <table class="table table-striped">
    <thead>
     <tr>
       <th style="width: 100px;">Name</th>
       <th style="width: 50px;">type</th>
       <th style="width: 50px;">default</th>
       <th>description</th>
     </tr>
    </thead>
    <tbody>
     <tr>
       <td>backdrop</td>
       <td>boolean or the string <code>'static'</code></td>
       <td>true</td>
       <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
     </tr>
     <tr>
       <td>keyboard</td>
       <td>boolean</td>
       <td>true</td>
       <td>Closes the modal when escape key is pressed</td>
     </tr>
     <tr>
       <td>show</td>
       <td>boolean</td>
       <td>true</td>
       <td>Shows the modal when initialized.</td>
     </tr>
     <tr>
       <td>remote</td>
       <td>path</td>
       <td>false</td>
       <td><p>If a remote URL is provided, content will be loaded via jQuery's <code>load</code> method and injected into the root of the modal element. If you're using the data-api, you may alternatively use the <code>href</code> attribute to specify the remote source. An example of this is shown below:</p>
       <div class="highlight"><pre><code class="html">&lt;a data-toggle="modal" href="remote.html" data-target="#modal"&gt;Click me&lt;/a&gt;
       </code></pre></div>
       </td>
     </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="4"></td>
      </tr>
    </tfoot>
  </table>

  <header class="content-header">
    <h2 class="title">
      Methods
    </h2>
  </header>

  <h4>.modal(options)</h4>
  <p>Activates your content as a modal. Accepts an optional options <code>object</code>.</p>
  <div class="highlight"><pre><code class="js">$(&#39;#myModal&#39;).modal({
  keyboard: false
  })
  </code></pre></div>

  <h4>.modal('toggle')</h4>
  <p>Manually toggles a modal. <strong>Returns to the caller before the modal has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.modal</code> or <code>hidden.bs.modal</code> event occurs).</p>
  <div class="highlight"><pre><code class="js">$(&#39;#myModal&#39;).modal(&#39;toggle&#39;)
  </code></pre></div>

  <h4>.modal('show')</h4>
  <p>Manually opens a modal. <strong>Returns to the caller before the modal has actually been shown</strong> (i.e. before the <code>shown.bs.modal</code> event occurs).</p>
  <div class="highlight"><pre><code class="js">$(&#39;#myModal&#39;).modal(&#39;show&#39;)
  </code></pre></div>

  <h4>.modal('hide')</h4>
  <p>Manually hides a modal. <strong>Returns to the caller before the modal has actually been hidden</strong> (i.e. before the <code>hidden.bs.modal</code> event occurs).</p>
  <div class="highlight"><pre><code class="js">$(&#39;#myModal&#39;).modal(&#39;hide&#39;)
  </code></pre></div>

  <header class="content-header">
    <h2 class="title">Events</h2>
  </header>

  <p>
    Bootstrap's modal class exposes a few events for hooking into modal functionality.
  </p>


  <div class="table-responsive">
    <table class="table table-bordered table-striped">
      <thead>
       <tr>
         <th style="width: 150px;">Event Type</th>
         <th>Description</th>
       </tr>
      </thead>
      <tbody>
       <tr>
         <td>show.bs.modal</td>
         <td>This event fires immediately when the <code>show</code> instance method is called. If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
       </tr>
       <tr>
         <td>shown.bs.modal</td>
         <td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
       </tr>
       <tr>
         <td>hide.bs.modal</td>
         <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
       </tr>
       <tr>
         <td>hidden.bs.modal</td>
         <td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
       </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2"></td>
        </tr>
      </tfoot>
    </table>
  </div><!-- /.table-responsive -->
  <br/>
  <pre>
    <code>
      &lt;div class=&quot;modal fade&quot; id=&quot;myModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
        &lt;div class=&quot;modal-dialog&quot;&gt;
          &lt;div class=&quot;modal-content&quot;&gt;
            &lt;div class=&quot;modal-header&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/button&gt;
              &lt;h4 id=&quot;myModalLabel&quot; class=&quot;modal-title&quot;&gt;Dialogue Title&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class=&quot;modal-body&quot;&gt;
              Dialogue body content
            &lt;/div&gt;
            &lt;div class=&quot;modal-footer&quot;&gt;
              &lt;a href=&quot;javascript:void(0);&quot; data-dismiss=&quot;modal&quot;&gt;Cancel&lt;/a&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;
                Save
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    </code>
  </pre>
</div>

<div class="example">
  <a id="lightbox"></a>
  <h1 class="title">Lightbox -- can be closed clicking outside of lightbox</h1>
  <a data-toggle="modal" href="#myModal1">
    Click to open a lightbox
  </a>
  <div class="modal lightbox fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 id="myModalLabel" class="modal-title">Dialogue Title</h4>
        </div>
        <div class="modal-body">
          <form method="post">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="userName1">User Name:</label>
                  <input type="text" id="userName1" class="form-control">
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="password1">Password:</label>
                  <input type="password" id="password1" class="form-control">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="email1">Email:</label>
                  <input type="email" id="email1" class="form-control">
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="textarea1">Text Area:</label>
                  <textarea placeholder="Enter text" name="textarea1" id="textarea1" rows="5" class="form-control"></textarea>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="selectMenu">Select Menu:</label>
                  <div class= "select">
                    <select id="selectMenu" class="form-control">
                      <option value="">All</option>
                      <option value=""></option>
                      <option value="A">Order Acknowledgement</option>
                      <option value="BR">Bulk Upload Response</option>
                      <option value="D">Dispatch Note</option>
                      <option value="I" selected="selected">Invoice</option>
                      <option value="LU">Lookup File</option>
                      <option value="O">Order</option>
                      <option value="P">PCard</option>
                      <option value="PR">PCard Response</option>
                      <option value="PT">Pass Through File</option>
                      <option value="Q">Query</option>
                      <option value="R">Requisition</option>
                      <option value="RM">Remittance</option>
                      <option value="SM">Status</option>
                      <option value="S">Statement</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="selectMenu3">Select Menu 2:</label>
                  <div class= "select">
                    <select id="selectMenu3" class="form-control">
                      <option value="send">Send</option>
                      <option value="recv">Receive</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group invalid error-hover">
                  <label>This has an error:</label>
                  <div class="checkbox">
                    <input type="checkbox" id="errorMessage">
                    <label for="errorMessage"><span class="checkbox-icon"></span></label>
                    <span class="error-message" data-original-title="" title="">Error message for checkbox</span>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label>Reporting Days:</label>
                  <div class= "checkbox-input-group">
                    <div class="checkbox-inline">
                      <input type="checkbox" id="sun">
                      <label for="sun"><span class="checkbox-icon"></span>Sun</label>
                    </div>
                    <div class="checkbox-inline">
                      <input type="checkbox" id="mon">
                      <label for="mon"><span class="checkbox-icon"></span>Mon</label>
                    </div>
                    <div class="checkbox-inline">
                      <input type="checkbox" id="tue">
                      <label for="tue"><span class="checkbox-icon"></span>Tue</label>
                    </div>
                    <div class="checkbox-inline">
                      <input type="checkbox" id="wed">
                      <label for="wed"><span class="checkbox-icon"></span>Wed</label>
                    </div>
                    <div class="checkbox-inline">
                      <input type="checkbox" id="thu">
                      <label for="thu"><span class="checkbox-icon"></span>Thu</label>
                    </div>
                    <div class="checkbox-inline">
                      <input type="checkbox" id="fri">
                      <label for="fri"><span class="checkbox-icon"></span>Fri</label>
                    </div>
                    <div class="checkbox-inline">
                      <input type="checkbox" id="sat">
                      <label for="sat"><span class="checkbox-icon"></span>Sat</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group time">
                  <label for="reportingInterval">Reporting Interval:</label>
                  <div class="input-group">
                    <input type="text" id="reportingInterval" class="form-control">
                    <span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group time">
                  <label for="startTime">Start Time:</label>
                  <div class="input-group">
                    <input type="text" id="startTime" class="form-control">
                    <span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group date">
                  <label for="finishDate">Add on Example:</label>
                  <div class="input-group">
                    <input type="text" id="finishDate" class="form-control">
                    <span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group has-addon">
                  <label for="finishTime">Add on Example:</label>
                  <div class="input-group">
                    <input type="text" id="finishTime" class="form-control">
                    <span class="input-group-addon"><span class="fa fa-star"></span></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="readonly">Readonly Example:</label>
                  <input type="text" id="readonly" class="form-control" value="Readonly text fields cut off text… need to display all text. Readonly text fields cut off text… need to display all text" readonly="readonly" size="100%">
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="readonly2">Readonly Example 2:</label>
                  <input type="text" id="readonly2" class="form-control" value="Readonly text fields cut off text… need to display all text. " readonly="readonly" size="100%">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <div class="checkbox">
                    <input type="checkbox" id="attachCSV">
                    <label for="attachCSV"><span class="checkbox-icon"></span>Attach CSV Report:</label>
                  </div>
                </div>
              </div>
              <div class="col-md-6"></div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group time">
                  <label for="reportingInterval55">Reporting Interval:</label>
                  <div class="input-group">
                    <input type="text" id="reportingInterval55" class="form-control">
                    <span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group time">
                  <label for="startTime55">Start Time:</label>
                  <div class="input-group">
                    <input type="text" id="startTime55" class="form-control">
                    <span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group date">
                  <label for="finishDate55">Add on Example:</label>
                  <div class="input-group">
                    <input type="text" id="finishDate55" class="form-control">
                    <span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group has-addon">
                  <label for="finishTime55">Add on Example:</label>
                  <div class="input-group">
                    <input type="text" id="finishTime55" class="form-control">
                    <span class="input-group-addon"><span class="fa fa-star"></span></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="readonly4">Readonly Example:</label>
                  <input type="text" id="readonly4" class="form-control" value="Readonly text fields cut off text… need to display all text. Readonly text fields cut off text… need to display all text" readonly="readonly" size="100%">
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="readonly233">Readonly Example 2:</label>
                  <input type="text" id="readonly233" class="form-control" value="Readonly text fields cut off text… need to display all text. " readonly="readonly" size="100%">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <div class="checkbox">
                    <input type="checkbox" id="attachCSV22">
                    <label for="attachCSV22"><span class="checkbox-icon"></span>Attach CSV Report:</label>
                  </div>
                </div>
              </div>
              <div class="col-md-6"></div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group time">
                  <label for="reportingInterval2">Reporting Interval:</label>
                  <div class="input-group">
                    <input type="text" id="reportingInterval2" class="form-control">
                    <span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group time">
                  <label for="startTime2">Start Time:</label>
                  <div class="input-group">
                    <input type="text" id="startTime2" class="form-control">
                    <span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group date">
                  <label for="finishDate2">Add on Example:</label>
                  <div class="input-group">
                    <input type="text" id="finishDate2" class="form-control">
                    <span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group has-addon">
                  <label for="finishTime2">Add on Example:</label>
                  <div class="input-group">
                    <input type="text" id="finishTime2" class="form-control">
                    <span class="input-group-addon"><span class="fa fa-star"></span></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="readonly3">Readonly Example:</label>
                  <input type="text" id="readonly3" class="form-control" value="Readonly text fields cut off text… need to display all text. Readonly text fields cut off text… need to display all text" readonly="readonly" size="100%">
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="readonly22">Readonly Example 2:</label>
                  <input type="text" id="readonly22" class="form-control" value="Readonly text fields cut off text… need to display all text. " readonly="readonly" size="100%">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <div class="checkbox">
                    <input type="checkbox" id="attachCSV2">
                    <label for="attachCSV2"><span class="checkbox-icon"></span>Attach CSV Report:</label>
                  </div>
                </div>
              </div>
              <div class="col-md-6"></div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <a href="javascript:void(0);"  data-close-prompt="Are you sure....?">Cancel</a>
          <button type="button" class="btn btn-default">
            Save
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="example">
  <h1 class="title">Lightbox -- can be closed only on clicking cancel/close button</h1>
  <p>To stop the behavior of closing lightbox on clicking anywhere outside lightbox can be achieved by adding data attribute<code>data-close-background="false"</code> to the <code>&lt;div class=&quot;modal lightbox&quot;&gt;&lt;/div&gt;</code> div</p>
  <p>Example: </p>
  <pre><code>
    &lt;div class=&quot;modal lightbox fade&quot; data-close-background=&quot;false&quot; id=&quot;myModal2&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
      ...
    &lt;/div&gt;</code>
  </pre>
  <a data-toggle="modal" href="#myModal2">
    Click to open a lightbox
  </a>
<div class="modal lightbox fade" data-close-background="false" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  <h4 id="myModalLabel2" class="modal-title">Dialogue Title</h4>
</div>
<div class="modal-body">
  <form method="post">
    <div class="row">
      <div class="col-md-12">
        <div class="form-group">
          <label for="userName" title="Enter the description of the item">Description*:</label>
          <input type="text" id="userName" class="form-control">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label for="email">Email:</label>
          <input type="email" id="email" class="form-control">
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <label for="password">Password:</label>
          <input type="password" id="password" class="form-control">
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <div class="form-group">
          <label for="email">Text Area:</label>
          <textarea placeholder="Enter text" name="textarea" id="textarea" rows="5" class="form-control"></textarea>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="form-group">
          <label for="selectMenu2">Select Menu 2:</label>
          <div class= "select">
            <select id="selectMenu2" class="form-control">
              <option value="send">Send</option>
              <option value="recv">Receive</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
<div class="modal-footer">
  <a href="javascript:void(0);" data-close-prompt="Are you sure?">Cancel</a>
  <button type="button" class="btn btn-default">
    Save
  </button>
</div>
</div>
</div>
</div>
  <h1 class="title">Add a prompt before closing a lightbox.</h1>
  <p>On the cancel button of lightbox, use <code>data-close-prompt=&quot;Are you sure?&quot;</code> attribute instead of <code>data-dismiss=&quot;modal&quot;</code></p>
  <pre><code>
      &lt;div class=&quot;modal lightbox fade&quot; data-close-background=&quot;false&quot; id=&quot;myModal2&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
        &lt;div class=&quot;modal-dialog&quot;&gt;
          &lt;div class=&quot;modal-content&quot;&gt;
            &lt;div class=&quot;modal-header&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;&times;&lt;/button&gt;
              &lt;h4 id=&quot;myModalLabel2&quot; class=&quot;modal-title&quot;&gt;Dialogue Title&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class=&quot;modal-body&quot;&gt;
              .
              .
              .
            &lt;/div&gt;
            &lt;div class=&quot;modal-footer&quot;&gt;
              &lt;a href=&quot;javascript:void(0);&quot; data-close-prompt=&quot;Prompt Message&quot;&gt;Cancel&lt;/a&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;
                Save
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    </code></pre>
</div>