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>
    

    comments powered by Disqus