ms-Dialog


<button class="ms-Button js-DialogAction--open" data-target=".ms-Dialog--sample"> 
  <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
  <span class="ms-Button-label">Open Dialog</span>
  <span class="ms-Button-description">Opens the Sample Dialog</span>
</button>
<div class="ms-Dialog ms-Dialog--sample">
  <div class="ms-Overlay ms-Overlay--dark js-DialogAction--close"></div>
  <div class="ms-Dialog-main">
    <button class="ms-Dialog-button ms-Dialog-button--close js-DialogAction--close">
      <i class="ms-Icon ms-Icon--x"></i>
    </button>
    <div class="ms-Dialog-header">
      <p class="ms-Dialog-title">All emails together</p>
    </div>
    <div class="ms-Dialog-inner">
      <div class="ms-Dialog-content">
        <p class="ms-Dialog-subText">Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.</p>
        <div class="ms-ChoiceField">
          <input class="ms-ChoiceField-input" id="demo-checkbox-unselected1" type="checkbox">
          <label class="ms-ChoiceField-field" for="demo-checkbox-unselected1"><span class="ms-Label">Option1</span></label>
        </div>
        <div class="ms-ChoiceField">
          <input class="ms-ChoiceField-input" id="demo-checkbox-unselected2" type="checkbox">
          <label class="ms-ChoiceField-field" for="demo-checkbox-unselected2"><span class="ms-Label">Option2</span></label>
        </div>
      </div>
      <div class="ms-Dialog-actions">
        <div class="ms-Dialog-actionsRight">
          <button class="ms-Dialog-action ms-Button ms-Button--primary">
            <span class="ms-Button-label">Save</span>
          </button>
          <button class="ms-Dialog-action ms-Button">
            <span class="ms-Button-label">Cancel</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript"> 
$(document).ready(function() {
   if ($.fn.Dialog) {
      $('.ms-Dialog'}.Dialog();
   }
});
</script>

Modal vs Modeless





© 2019 Better Solutions Limited. All Rights Reserved. © 2019 Better Solutions Limited TopPrevNext