modals

This module will provide directives to create modals and overlays components.

A directive to create modals and overlays components.

Modals are basically the same of Bootstrap 3 but you have to use uiSharedState with ngIf/uiIf or ngHide/uiHide to activate/dismiss it.

By default both modals and overlay are made always showing up by css rule .modal {display:block}, so you can use it with ngAnimate and other angular directives in a simpler way.

Overlay are a style of modal that looks more native in mobile devices providing a blurred overlay as background.

You can create an overlay adding .modal-overlay class to a modal.

Note

For modals and overlays to cover the entire page you have to attach them as child of body element. To achieve this from a view is a common use for contentFor/yieldTo directives contained from capture module:

<body ng-app="myApp">

  <!-- ... -->
  <!-- Modals and Overlays -->
  <div ui-yield-to="modals"></div>

</body>

Then you can wrap your modals and overlays in contentFor:

<div ui-content-for="modals">
* <div class="modal"><!-- ... --></div>
</div>

Example. Create a Modal.

<div ui-content-for="modals">
  <div class="modal" ui-if="modal1" ui-shared-state='modal1'>
    <div class="modal-backdrop in"></div>
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close"
                  ui-turn-off="modal1">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          <p>Lorem ipsum ...</p>
        </div>
        <div class="modal-footer">
          <button ui-turn-off="modal1" class="btn btn-default">Close</button>
          <button ui-turn-off="modal1" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</div>

Example. Create an Overlay.

<div ui-content-for="modals">
  <div class="modal modal-overlay" ui-if='modal2' ui-shared-state='modal2'>
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close"
                  ui-turn-off="modal2">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          <p>Lorem ipsum ...</p>
        </div>
        <div class="modal-footer">
          <button ui-turn-off="modal2" class="btn btn-default">Close</button>
          <button ui-turn-off="modal2" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</div>

Directives

modal directive

Note