<div class="page page-modals"> <!-- page header --> <div class="pageheader"> <h2>{{page.title}} <span>// {{page.subtitle}}</span></h2> <div class="page-bar"> <ul class="page-breadcrumb"> <li> <a ui-sref="app.dashboard"><i class="fa fa-home"></i> {{main.title}}</a> </li> <li> <a href="javascript:;">UI Kit</a> </li> <li> <a ui-sref="app.ui.modals">{{page.title}}</a> </li> </ul> </div> </div> <!-- /page header --> <!-- page content --> <div class="pagecontent"> <!-- row --> <div class="row"> <!-- col --> <div class="col-md-12"> <!-- tile --> <section class="tile" fullscreen="isFullscreen01"> <!-- tile header --> <div class="tile-header dvd dvd-btm"> <h1 class="custom-font"><strong>Default</strong> Modals</h1> <ul class="controls"> <li class="dropdown" uib-dropdown on-toggle="toggled(open)"> <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a> <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp"> <li> <a href tile-control-toggle> <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span> <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span> </a> </li> <li> <a href tile-control-refresh ng-click="ajaxFaker()"> <fa name="refresh"></fa> Refresh </a> </li> <li> <a href tile-control-fullscreen ng-click="isFullscreen01 = !isFullscreen01"> <fa name="expand"></fa> Fullscreen </a> </li> </ul> </li> <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li> </ul> </div> <!-- /tile header --> <!-- tile body --> <div class="tile-body"> <div ng-controller="ModalDemoCtrl"> <script type="text/ng-template" id="myModalContent.html"><div class="modal-header">
                  <h3 class="modal-title custom-font">I'm a modal!</h3>
                </div>
                <div class="modal-body">
                  <ul>
                    <li ng-repeat="item in items">
                      <a ng-click="selected.item = item">{{ item }}</a>
                    </li>
                  </ul>
                  Selected: <b>{{ selected.item }}</b>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-success btn-ef btn-ef-3 btn-ef-3c" ng-click="ok()"><i class="fa fa-arrow-right"></i> Submit</button>
                  <button class="btn btn-lightred btn-ef btn-ef-4 btn-ef-4c" ng-click="cancel()"><i class="fa fa-arrow-left"></i> Cancel</button>
                </div></script> <button class="btn btn-default" ng-click="open()">Open me!</button> <button class="btn btn-default" ng-click="open('lg')">Large modal</button> <button class="btn btn-default" ng-click="open('sm')">Small modal</button> <div ng-show="selected">Selection from a modal: {{ selected }}</div> </div> </div> <!-- /tile body --> </section> <!-- /tile --> <!-- tile --> <section class="tile" fullscreen="isFullscreen02"> <!-- tile header --> <div class="tile-header dvd dvd-btm"> <h1 class="custom-font"><strong>Custom </strong>Modals</h1> <ul class="controls"> <li class="dropdown" uib-dropdown on-toggle="toggled(open)"> <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a> <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp"> <li> <a href tile-control-toggle> <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span> <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span> </a> </li> <li> <a href tile-control-refresh ng-click="ajaxFaker()"> <fa name="refresh"></fa> Refresh </a> </li> <li> <a href tile-control-fullscreen ng-click="isFullscreen02 = !isFullscreen02"> <fa name="expand"></fa> Fullscreen </a> </li> </ul> </li> <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li> </ul> </div> <!-- /tile header --> <!-- tile body --> <div class="tile-body" ng-controller="SplashDemoCtrl"> <script type="text/ng-template" id="mySplashContent.html"><div class="modal-header">
                <h3 class="modal-title custom-font">I'm a modal!</h3>
              </div>
              <div class="modal-body">

                <p>This sure is a fine modal, isn't it?</p>

                <ul>
                  <li ng-repeat="item in items">
                    <a ng-click="selected.item = item">{{ item }}</a>
                  </li>
                </ul>

                Selected: <b>{{ selected.item }}</b>

              </div>
              <div class="modal-footer">
                <button class="btn btn-default btn-border" ng-click="ok()">Submit</button>
                <button class="btn btn-default btn-border" ng-click="cancel()">Cancel</button>
              </div></script> <div class="row"> <div class="col-md-4"> <h5 class="custom-font"><strong>Fade and Slide</strong> effects</h5> <button class="btn btn-success mb-10" ng-click="openSplash($event)" data-options="splash-1 splash-ef-1">Default Splash</button> <button class="btn btn-success mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-primary splash-ef-2">Fade in &amp; Scale</button> <button class="btn btn-success mb-10" ng-click="openSplash($event)" data-options="splash-ef-3">Slide in (right)</button> <button class="btn btn-success mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-ef-4">Slide in (bottom)</button> </div> <div class="col-md-4"> <h5 class="custom-font"><strong>Flip and Rotate</strong> effects</h5> <button class="btn btn-primary mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-ef-9">3D Flip (horizontal)</button> <button class="btn btn-primary mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-ef-10">3D Flip (vertical)</button> <button class="btn btn-primary mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-ef-11">3D Sign</button> <button class="btn btn-primary mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-ef-14">3D Slit</button> <button class="btn btn-primary mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-ef-15">3D Rotate Bottom</button> <button class="btn btn-primary mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-ef-16">3D Rotate In Left</button> </div> <div class="col-md-4"> <h5 class="custom-font"><strong>Other</strong> effects</h5> <button class="btn btn-warning mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-ef-5">Newspaper</button> <button class="btn btn-warning mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-ef-6">Fall</button> <button class="btn btn-warning mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-ef-7">Side Fall</button> <button class="btn btn-warning mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-ef-8">Sticky Up</button> <button class="btn btn-warning mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-ef-12">Super Scaled</button> <button class="btn btn-warning mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-greensea splash-ef-13">Just Me</button> </div> </div> <div ng-show="selected">Selection from a modal: {{ selected }}</div> </div> <!-- /tile body --> </section> <!-- /tile --> </div> <!-- /col --> </div> <!-- /row --> </div> <!-- /page content --> </div>