123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197 |
- <!-- start: PAGE TITLE -->
- <section id="page-title">
- <div class="row">
- <div class="col-sm-8">
- <h1 class="mainTitle" translate="sidebar.nav.element.MODALS">{{ mainTitle }}</h1>
- <span class="mainDescription">A modal window is any type of window that is a child (secondary window) to a parent window and usurps the parent's control. <small class="block">Webopedia - Online Tech Dictionary for IT Professionals</small></span>
- </div>
- <div ncy-breadcrumb></div>
- </div>
- </section>
- <!-- end: PAGE TITLE -->
- <!-- start: UI BOOTSTRAP MODALS -->
- <div class="container-fluid container-fullw bg-white">
- <!-- /// controller: 'ModalDemoCtrl' - localtion: assets/js/controllers/bootstrapCtrl.js /// -->
- <div ng-controller="ModalDemoCtrl">
- <div class="row">
- <div class="col-md-12">
- <h5 class="over-title margin-bottom-15">UI Bootstrap <span class="text-bold">Modals</span></h5>
- <p>
- $modal is a service to quickly create AngularJS-powered modal windows. Creating custom modals is straightforward: create a partial view, its controller and reference them when using the service.
- </p>
- <script type="text/ng-template" id="myModalContent.html">
- <div class="modal-header">
- <h3 class="modal-title">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-primary" ng-click="ok()">OK</button>
- <button class="btn btn-primary btn-o" ng-click="cancel()">Cancel</button>
- </div>
- </script>
- <div class="row">
- <div class="col-lg-4 col-sm-6">
- <div class="panel panel-transparent">
- <div class="panel-heading">
- <div class="panel-title">
- Default Modal
- </div>
- </div>
- <div class="panel-body">
- <p class="margin-bottom-30">
- Toggle a modal by clicking the button below. It will slide down and fade in from the top of the page.
- </p>
- <button class="btn btn-primary btn-o pull-right" ng-click="open()">
- Open Deafult Modal
- </button>
- </div>
- </div>
- </div>
- <div class="col-lg-4 col-sm-6">
- <div class="panel panel-transparent">
- <div class="panel-heading">
- <div class="panel-title">
- Large Modal
- </div>
- </div>
- <div class="panel-body">
- <p class="margin-bottom-30">
- Modals have a large optional size, available by setting option <code>size: 'lg'</code> in the method <code>open(options)</code>
- </p>
- <button class="btn btn-primary btn-o pull-right" ng-click="open('lg')">
- Open Large Modal
- </button>
- </div>
- </div>
- </div>
- <div class="col-lg-4 col-sm-6">
- <div class="panel panel-transparent">
- <div class="panel-heading">
- <div class="panel-title">
- Small Modal
- </div>
- </div>
- <div class="panel-body">
- <p class="margin-bottom-30">
- Modals have a small optional size, available by setting option <code>size: 'sm'</code> in the method <code>open(options)</code>
- </p>
- <button class="btn btn-primary btn-o pull-right" ng-click="open('sm')">
- Open Small Modal
- </button>
- </div>
- </div>
- </div>
- </div>
- <div ng-show="selected" class="margin-top-15 text-small">
- Selection from a modal: {{ selected }}
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- end: UI BOOTSTRAP MODALS -->
- <!-- start: ASIDE -->
- <div class="container-fluid container-fullw">
- <!-- /// controller: 'AsideCtrl' - localtion: assets/js/controllers/asideCtrl.js /// -->
- <div ng-controller="AsideCtrl">
- <div class="row">
- <div class="col-md-12">
- <h5 class="over-title">Angular <span class="text-bold">Aside</span></h5>
- <p class="margin-bottom-30">
- Off canvas side menu to use with ui-bootstrap. Extends ui-bootstrap's $modal provider.
- </p>
- <script type="text/ng-template" id="asideContent.html">
- <div class="modal-header">
- <h3 class="modal-title">ngAside</h3>
- </div>
- <div class="modal-body">
- Look i'm in aside.
- </div>
- <div class="modal-footer">
- <button class="btn btn-primary" ng-click="ok($event)">OK</button>
- <button class="btn btn-primary" ng-click="cancel($event)">Cancel</button>
- </div>
- </script>
- <div class="row">
- <div class="col-sm-6 col-lg-3">
- <div class="panel panel-white">
- <div class="panel-heading">
- <div class="panel-title">
- Up Aside
- </div>
- </div>
- <div class="panel-body">
- <p class="margin-bottom-30">
- This modal slide down from the top of the page.
- </p>
- <button type="button" class="btn btn-primary btn-block btn-scroll btn-scroll-top ti-arrow-up" ng-click="openAside('top')">
- <span>Up</span>
- </button>
- </div>
- </div>
- </div>
- <div class="col-sm-6 col-lg-3">
- <div class="panel panel-white">
- <div class="panel-heading">
- <div class="panel-title">
- Left Aside
- </div>
- </div>
- <div class="panel-body">
- <p class="margin-bottom-30">
- This modal slides from the left side of the page.
- </p>
- <button type="button" class="btn btn-primary btn-block btn-scroll btn-scroll-top ti-arrow-left" ng-click="openAside('left')">
- <span>Left</span>
- </button>
- </div>
- </div>
- </div>
- <div class="col-sm-6 col-lg-3">
- <div class="panel panel-white">
- <div class="panel-heading">
- <div class="panel-title">
- Down Aside
- </div>
- </div>
- <div class="panel-body">
- <p class="margin-bottom-30">
- This modal slide up from the bottom of the page.
- </p>
- <button type="button" class="btn btn-primary btn-block btn-scroll btn-scroll-top ti-arrow-down" ng-click="openAside('bottom')">
- <span>Down</span>
- </button>
- </div>
- </div>
- </div>
- <div class="col-sm-6 col-lg-3">
- <div class="panel panel-white">
- <div class="panel-heading">
- <div class="panel-title">
- Right Aside
- </div>
- </div>
- <div class="panel-body">
- <p class="margin-bottom-30">
- This modal slides from the right side of the page
- </p>
- <button type="button" class="btn btn-primary btn-block btn-scroll btn-scroll-top ti-arrow-right" ng-click="openAside('right')">
- <span>Right</span>
- </button>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- end: ASIDE -->
|