---
layout      : 'default'
css         : 'modal-demo'

title       : 'Modal'
description : 'A modal displays content that temporarily blocks interactions with a web site'
type        : 'UI Module'
---
<script src="/javascript/modal.js"></script>

<%- @partial('header') %>

<div class="main container">

  <div class="ui basic modal">
    <div class="header">
      Change Your Homepage
    </div>
    <div class="content">
      <div class="left">
        <i class="home icon"></i>
      </div>
      <div class="right">
        <p>Are you sure you want to change your homepage to <b>Poodle.com</b>?</p>
      </div>
    </div>
    <div class="actions">
      <div class="two fluid ui buttons">
        <div class="ui negative labeled icon button">
          <i class="remove icon"></i>
          No
        </div>
        <div class="ui positive right labeled icon button">
          Yes
          <i class="checkmark icon"></i>
        </div>
      </div>
    </div>
  </div>

  <div class="ui small modal">
    <i class="close icon"></i>
    <div class="header">
      Changing Your Thing
    </div>
    <div class="content">
      <p>Do you want to change that thing to something else?</p>
    </div>
    <div class="actions">
      <div class="ui negative button">
        No
      </div>
      <div class="ui positive right labeled icon button">
        Yes
        <i class="checkmark icon"></i>
      </div>
    </div>
  </div>

  <div class="ui large modal">
    <i class="close icon"></i>
    <div class="header">
      Changing Your Thing
    </div>
    <div class="content">
      <p>Do you want to change that thing to something else?</p>
    </div>
    <div class="actions">
      <div class="ui negative button">
        No
      </div>
      <div class="ui positive right labeled icon button">
        Yes
        <i class="checkmark icon"></i>
      </div>
    </div>
  </div>

  <div class="ui test modal">
    <i class="close icon"></i>
    <div class="header">
      Profile Picture
    </div>
    <div class="content">
      <div class="left">
        <img class="ui medium image" src="/images/demo/avatar2.jpg">
      </div>
      <div class="right">
        <div class="ui header">Are you sure you want to upload that?</div>
        <p>I mean it's not really the best profile photo.</p>
        <p>It's resampled to like two times the size it's suppose to be. Our image detection software also says it might even be inappropriate.</p>
      </div>
    </div>
    <div class="actions">
      <div class="ui black button">
        Cancel
      </div>
      <div class="ui positive right labeled icon button">
        Add Photo
        <i class="checkmark icon"></i>
      </div>
    </div>
  </div>

  <div class="peek">
    <div class="ui vertical pointing secondary menu">
      <a class="active item">Usage</a>
      <a class="item">Types</a>
      <a class="item">Variations</a>
      <a class="item">States</a>
      <a class="item">Examples</a>
      <a class="item">Behavior</a>
      <a class="item">Settings</a>
    </div>
  </div>

  <h2 class="ui dividing header">Usage</h2>

  <h3 class="ui header">Initializing a modal</h3>
  <p>A modal can be included anywhere on the page. On initialization a modal's current size will be cached, and the element will be detached from the dom and moved inside a dimmer.</p>
  <div class="ui info message">
    <div class="header">Why move modal content?</div>
    <p>Having a modal inside the page dimmer allows for 3D animations without having the 3D perspective settings alter the rest of the page content. Additionally, content outside the dimmer can be blurred or altered without affecting the modal's content.</p>
  </div>
  <div class="code" data-type="javascript">
    $('.ui.modal')
      .modal()
    ;
  </div>
  <div class="code" data-type="html">
    <div class="ui modal">
      <i class="close icon"></i>
      <div class="header">
        Modal Title
      </div>
      <div class="content">
        <div class="left">
          Content can appear on left
        </div>
        <div class="right">
          Content can appear on right
        </div>
      </div>
      <div class="actions">
        <div class="ui button">Cancel</div>
        <div class="ui button">OK</div>
      </div>
    </div>
  </div>

  <h2 class="ui dividing header">Types</h2>

  <div class="no example">
    <h4 class="ui header">Standard</h4>
    <p>A standard modal</p>
    <div class="code" data-demo="true">
    $('.test.modal')
      .modal('show')
    ;
    </div>
  </div>

  <div class="no example">
    <h4 class="ui header">Basic</h4>
    <p>A modal can reduce its complexity</p>
    <div class="code" data-demo="true">
    $('.basic.modal')
      .modal('show')
    ;
    </div>
  </div>

  <h2 class="ui dividing header">Variations</h2>

  <div class="no example">
    <h4 class="ui header">Size</h4>
    <p>A modal can vary in size</p>
    <div class="code" data-demo="true">
    $('.small.modal')
      .modal('show')
    ;
    </div>
    <div class="code" data-demo="true">
    $('.large.modal')
      .modal('show')
    ;
    </div>
  </div>

  <h2 class="ui dividing header">States</h2>

  <div class="example">
    <h4 class="ui header">Active</h4>
    <p>An active modal is visible on the page</p>
    <div class="code" data-type="html">
      <div class="active ui modal">...</div>
    </div>
  </div>

  <h2 class="ui dividing header">Examples</h2>

  <div class="no example">
    <h4 class="ui header">Approve / Deny Callbacks</h4>
    <p>Modals will automatically tie approve deny callbacks to any positive/approve or negative/deny buttons</p>
    <div class="code" data-demo="true">
    $('.basic.modal')
      .modal('setting', 'onDeny', function(){
        window.alert('Denied!');
      })
      .modal('setting', 'onApprove', function(){
        window.alert('Approved!');
      })
      .modal('show')
    ;
    </div>
  </div>

  <div class="no example">
    <h4 class="ui header">Forcing a Choice</h4>
    <p>You can disable a modal's dimmer from being closed by click to force a user to make a choice</p>
    <div class="code" data-demo="true">
    $('.basic.modal')
      .modal('setting', 'closable', false)
      .modal('show')
    ;
    </div>
  </div>

  <div class="no example">
    <h4 class="ui header">Transitions</h4>
    <p>A modal can use any named ui transition.</p>
    <div class="ui selection dropdown">
      <input type="hidden" name="transition">
      <i class="dropdown icon"></i>
      <div class="default text">Choose transition</div>
      <div class="menu">
        <div class="item">Horizontal Flip</div>
        <div class="item">Vertical Flip</div>
        <div class="item">Fade Up</div>
        <div class="item">Fade</div>
        <div class="item">Scale</div>
      </div>
    </div>
    <div class="ui clearing divider"></div>
    <div class="code">
    $('.selection')
      .dropdown({
        onChange: function(value) {
          $('.test.modal')
            .modal('setting', 'transition', value)
            .modal('show')
          ;
        }
      })
    ;
    </div>
  </div>

  <h2 class="ui dividing header">Behavior</h2>

  <div class="no example">
    <h4 class="ui header">Attach events</h4>
    <p>A modal can attach events to another element</p>
    <div class="code" data-demo="true">
    $('.test.modal')
      .modal('attach events', '.test.button', 'show')
    ;
    </div>
    <div class="ui primary test button">Launch modal</div>
  </div>

  <div class="no example">
    <h4 class="ui header">Show</h4>
    <p>A modal can show itself</p>
    <div class="code" data-demo="true">
    $('.test.modal')
      .modal('show')
    ;
    </div>
  </div>
  <div class="no example">
    <h4 class="ui header">Hide</h4>
    <p>A modal can hide itself</p>
    <div class="code">
    $('.test.modal')
      .modal('hide')
    ;
    </div>
  </div>
  <div class="no example">
    <h4 class="ui header">Toggle</h4>
    <p>A modal can toggle its visibility</p>
    <div class="code" data-demo="true">
    $('.test.modal')
      .modal('toggle')
    ;
    </div>
  </div>

  Additionally, all the following behaviors can be called using the syntax <code>$('.foo').modal('behavior name', argumentOne, argumentTwo)</code>

  <table class="ui definition celled table segment">
    <tr>
      <td>refresh</td>
      <td>Refreshes centering of modal on page</td>
    </tr>
    <tr>
      <td>show dimmer</td>
      <td>Shows associated page dimmer</td>
    </tr>
    <tr>
      <td>hide dimmer</td>
      <td>Hides associated page dimmer</td>
    </tr>
    <tr>
      <td>hide all</td>
      <td>Hides all visible modals initialized at the same time</td>
    </tr>
    <tr>
      <td>cache sizes</td>
      <td>Caches current modal size</td>
    </tr>
    <tr>
      <td>can fit</td>
      <td>Returns whether the modal can fit on the page</td>
    </tr>
    <tr>
      <td>is active</td>
      <td>Returns whether the modal is active</td>
    </tr>
    <tr>
      <td>set active</td>
      <td>Sets modal to active</td>
    </tr>
  </table>

  <h2 class="ui dividing header">Settings</h2>

  <h4 class="ui header">Modal Settings</h4>
  <p>Modal settings modify the modal's behavior</p>
  <table class="ui red celled sortable definition table segment">
    <thead>
      <th>Setting</th>
      <th class="four wide">Default</th>
      <th>Description</th>
    </thead>
    <tbody>
      <tr>
        <td>offset</td>
        <td>0</td>
        <td>A vertical offset to allow for content outside of modal, for example a close button, to be centered.</td>
      </tr>
      <tr>
        <td>context</td>
        <td>
        body
        </td>
        <td>Selector or jquery object specifying the area to dim</td>
      </tr>
      <tr>
        <td>closable</td>
        <td>
        true
        </td>
        <td>Settings to false will not allow you to close the modal by clicking on the dimmer</td>
      </tr>
      <tr>
        <td>transition</td>
        <td>
          scale
        </td>
        <td>Named transition to use when animating menu in and out. <code>Fade</code> is available without including <a href="/modules/transition.html">ui transitions</a></td>
      </tr>
      <tr>
        <td>duration</td>
        <td>
          400
        </td>
        <td>Duration of animation</td>
      </tr>
      <tr>
        <td>easing</td>
        <td>
          easeOutExpo
        </td>
        <td>Animation easing is only used if javascript animations are used.</td>
      </tr>
    </tbody>
  </table>

  <div class="ui horizontal section icon divider"><i class="icon setting"></i></div>
  <h4 class="ui header">Callbacks</h4>
  <p>Callback settings specify a function to occur after a specific behavior.</p>

  <table class="ui green celled sortable definition table segment">
    <thead>
      <th class="four wide">Setting</th>
      <th>Context</th>
      <th>Description</th>
    </thead>
    <tbody>
      <tr>
        <td>onShow</td>
        <td>Modal</td>
        <td>Is called after a modal is shown.</td>
      </tr>
      <tr>
        <td>onHide</td>
        <td>Modal</td>
        <td>Is called after a modal is hidden.</td>
      </tr>
      <tr>
        <td>onApprove</td>
        <td>Modal</td>
        <td>Is called after a positive or approve button is pressed</td>
      </tr>
      <tr>
        <td>onDeny</td>
        <td>Modal</td>
        <td>Is called after a negative or cancel button is pressed.</td>
      </tr>
    </tbody>
  </table>

  <h4 class="ui header">DOM Settings</h4>
  <p>DOM settings specify how this module should interface with the DOM</p>
  <table class="ui purple celled sortable definition table segment">
    <thead>
      <th>Setting</th>
      <th class="four wide">Default</th>
      <th>Description</th>
    </thead>
    <tbody>
      <tr>
        <td>namespace</td>
        <td>modal</td>
        <td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
      </tr>
      <tr>
        <td>selector</td>
        <td colspan="2">
          <div class="code">
    selector    : {
      close    : '.close, .actions .button',
      approve  : '.actions .positive, .actions .approve',
      deny     : '.actions .negative, .actions .cancel'
    },
          </div>
        </td>
      </tr>
      <tr>
        <td>className</td>
        <td colspan="2">
          <div class="code">
    className : {
      active    : 'active',
      scrolling : 'scrolling'
    }
          </div>
        </td>
      </tr>
    </tbody>
  </table>

  <h4 class="ui header">Debug Settings</h4>
  <p>Debug settings controls debug output to the console</p>
  <table class="ui blue celled sortable definition table segment">
    <thead>
      <th>Setting</th>
      <th class="four wide">Default</th>
      <th>Description</th>
    </thead>
    <tbody>
      <tr>
        <td>name</td>
        <td>Modal</td>
        <td>Name used in debug logs</td>
      </tr>
      <tr>
        <td>debug</td>
        <td>True</td>
        <td>Provides standard debug output to console</td>
      </tr>
      <tr>
        <td>performance</td>
        <td>True</td>
        <td>Provides standard debug output to console</td>
      </tr>
      <tr>
        <td>verbose</td>
        <td>True</td>
        <td>Provides ancillary debug output to console</td>
      </tr>
      <tr>
        <td>error</td>
        <td colspan="2">
          <div class="code">
    error   : {
      method    : 'The method you called is not defined.''
    }
          </div>
        </td>
      </tr>
    </tbody>
  </table>


</div>
</body>

</html>