SemanSemantic-UItic-UI/server/documents/modules/modal.html.eco

---
layout      : 'default'
css         : 'modal-page'

element     : 'modal'
elementType : 'module'

title       : 'Modal'
description : 'A modal displays content that temporarily blocks interactions with the main view of a site'
type        : 'UI Module'

themes      : ['Default', 'Fixed-width']
---
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/modules/modal.less" />
<script src="/javascript/modal.js"></script>

<%- @partial('header', { tabs: 'module' }) %>

<div class="main container">

  <div class="ui basic test modal">
    <i class="close icon"></i>
    <div class="header">
      Archive Old Messages
    </div>
    <div class="content">
      <div class="image">
        <i class="archive icon"></i>
      </div>
      <div class="description">
        <p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
      </div>
    </div>
    <div class="actions">
      <div class="two fluid ui inverted buttons">
        <div class="ui red basic inverted button">
          <i class="remove icon"></i>
          No
        </div>
        <div class="ui green basic inverted button">
          <i class="checkmark icon"></i>
          Yes
        </div>
      </div>
    </div>
  </div>

  <div class="ui small modal">
    <i class="close icon"></i>
    <div class="header">
      Delete Your Account
    </div>
    <div class="content">
      <p>Are you sure you want to delete your account</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 fullscreen modal">
    <i class="close icon"></i>
    <div class="header">
      Update Your Account Settings
    </div>
    <div class="content">
      <div class="ui form">
        <h4 class="ui dividing header">Give us your feedback</h4>
        <div class="field">
          <label>Feedback</label>
          <textarea></textarea>
        </div>
        <div class="field">
          <div class="ui checkbox">
            <input type="checkbox" checked="checked" name="contact-me">
            <label>It's okay to contact me.</label>
          </div>
        </div>
      </div>
    </div>
    <div class="actions">
      <div class="ui button">Cancel</div>
      <div class="ui green button">Send</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 standard test modal">
    <i class="close icon"></i>
    <div class="header">
      Profile Picture
    </div>
    <div class="content">
      <div class="ui medium image">
        <img src="/images/avatar/large/chris.jpg">
      </div>
      <div class="description">
        <div class="ui header">We've auto-chosen a profile image for you.</div>
        <p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
        <p>Is it okay to use this photo?</p>
      </div>
    </div>
    <div class="actions">
      <div class="ui black button">
        Nope
      </div>
      <div class="ui positive right labeled icon button">
        Yep, that's me
        <i class="checkmark icon"></i>
      </div>
    </div>
  </div>

  <div class="ui active tab" data-tab="definition">

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

    <div class="example">
      <h4 class="ui header">Standard</h4>
      <p>A standard modal</p>
      <div class="code" data-demo="true">
      $('.standard.test.modal')
        .modal('show')
      ;
      </div>
      <div class="existing code" data-type="html">
        <div class="ui modal">
          <i class="close icon"></i>
          <div class="header">
            Profile Picture
          </div>
          <div class="content">
            <div class="ui medium image">
              <img src="/images/avatar/large/chris.jpg">
            </div>
            <div class="description">
              <div class="ui header">We've auto-chosen a profile image for you.</div>
              <p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
              <p>Is it okay to use this photo?</p>
            </div>
          </div>
          <div class="actions">
            <div class="ui black button">
              Nope
            </div>
            <div class="ui positive right labeled icon button">
              Yep, that's me
              <i class="checkmark icon"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="example">
      <h4 class="ui header">Basic</h4>
      <p>A modal can reduce its complexity</p>
      <div class="code" data-demo="true">
      $('.basic.test.modal')
        .modal('show')
      ;
      </div>
      <div class="existing code">
        <div class="ui basic modal">
          <i class="close icon"></i>
          <div class="header">
            Archive Old Messages
          </div>
          <div class="content">
            <div class="image">
              <i class="archive icon"></i>
            </div>
            <div class="description">
              <p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
            </div>
          </div>
          <div class="actions">
            <div class="two fluid ui inverted buttons">
              <div class="ui red basic inverted button">
                <i class="remove icon"></i>
                No
              </div>
              <div class="ui green basic inverted button">
                <i class="checkmark icon"></i>
                Yes
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

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

    <div class="no example">
      <h4 class="ui header">Full Screen</h4>
      <p>A modal can use the entire size of the screen</p>
      <div class="code" data-demo="true">
      $('.fullscreen.modal')
        .modal('show')
      ;
      </div>
    </div>
    <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="ui active modal"></div>
      </div>
    </div>
  </div>

  <div class="ui tab" data-tab="examples">

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

    <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.test.modal')
        .modal('setting', 'closable', false)
        .modal('show')
      ;
      </div>
    </div>

    <div class="no example">
      <h4 class="ui header">Approve / Deny Callbacks</h4>
      <p>Modals will automatically tie approve deny callbacks to any positive/approve, negative/deny or ok/cancel buttons. If a callback returns false it will prevent the modal from closing</p>
      <div class="code" data-demo="true">
      $('.basic.test.modal')
        .modal('setting', {
          closable  : false,
          onDeny    : function(){
            window.alert('Wait not yet!');
            return false;
          },
          onApprove : function() {
            window.alert('Approved!');
          }
        })
        .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">
        <div class="default text">Choose transition</div>
        <i class="dropdown icon"></i>
        <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')
        .dropdown({
          onChange: function(value) {
            alert($('.standard.test.modal').size());
            $('.standard.test.modal')
              .modal('setting', 'transition', value)
              .modal('show')
            ;
          }
        })
      ;
      </div>
    </div>

    <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">
      $('.standard.test.modal')
        .modal('attach events', '.test.button', 'show')
      ;
      </div>
      <div class="ui primary test button">Launch modal</div>
    </div>
  </div>

  <div class="ui tab" data-tab="usage">

    <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>
      <p>If you need to have your modal stay in its current location you can preserve its position using the setting <code>detachable: false</code></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="image">
            An image can appear on left or an icon
          </div>
          <div class="description">
            A description can appear on the 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">Behavior</h2>

    <p>All the following <a href="/module.html#/behavior">behaviors</a> can be called using the syntax:</p>
    <div class="code">
    $('.ui.modal')
      .modal('behavior name', argumentOne, argumentTwo)
    ;
    </div>

    <table class="ui definition celled sortable table segment">
      <thead>
        <tr>
          <th>Behavior</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>show</td>
          <td>Shows the modal</td>
        </tr>
        <tr>
          <td>hide</td>
          <td>Hides the modal</td>
        </tr>
        <tr>
          <td>toggle</td>
          <td>Toggles the modal</td>
        </tr>
        <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 others</td>
          <td>Hides all modals not selected modal in a dimmer</td>
        </tr>
        <tr>
          <td>hide all</td>
          <td>Hides all visible modals in the same dimmer</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>
      </tbody>
    </table>
  </div>

  <div class="ui tab" data-tab="settings">

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

    <h3 class="ui header">Modal Settings
      <div class="sub header">Modal settings modify the modal's behavior</div>
    </h3>

    <table class="ui red celled sortable definition table segment">
      <thead>
        <tr>
          <th>Setting</th>
          <th class="four wide">Default</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>detachable</td>
          <td>true</td>
          <td>If set to false will prevent the modal from being moved to inside the dimmer</td>
        </tr>
        <tr>
          <td>allowMultiple</td>
          <td>false</td>
          <td>If set to true will not close other visible modals when opening a new one</td>
        </tr>
        <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>useCSS</td>
          <td>
            true
          </td>
          <td>Whether to use CSS animations instead of fallback javascript animations</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>
    <h3 class="ui header">Callbacks
      <div class="sub header">Callbacks specify a function to occur after a specific behavior.</div>
    </h3>


    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
          <th class="four wide">Setting</th>
          <th>Context</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>onShow</td>
          <td>Modal</td>
          <td>Is called when a modal starts to show.</td>
        </tr>
        <tr>
          <td>onVisible</td>
          <td>Modal</td>
          <td>Is called after a modal has finished showing animating.</td>
        </tr>
        <tr>
          <td>onHide</td>
          <td>Modal</td>
          <td>Is called after a modal starts to hide.</td>
        </tr>
        <tr>
          <td>onHidden</td>
          <td>Modal</td>
          <td>Is called after a modal has finished hiding animation.</td>
        </tr>
        <tr>
          <td>onApprove</td>
          <td>Modal</td>
          <td>Is called after a positive, approve or ok button is pressed</td>
        </tr>
        <tr>
          <td>onDeny</td>
          <td>Modal</td>
          <td>Is called after a negative, deny or cancel button is pressed.</td>
        </tr>
      </tbody>
    </table>

    <h3 class="ui header">DOM Settings
      <div class="sub header">DOM settings specify how this module should interface with the DOM</div>
    </h3>

    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
        <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, .actions .ok',
        deny     : '.actions .negative, .actions .deny, .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>

    <h3 class="ui header">Debug Settings
      <div class="sub header">Debug settings controls debug output to the console</div>
    </h3>

    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
          <th>Setting</th>
          <th class="four wide">Default</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>name</td>
          <td>Modal</td>
          <td>Name used in debug logs</td>
        </tr>
        <tr>
          <td>debug</td>
          <td>False</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>

</div>

<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/modules/modal.less" />