<style>
/* page-specific styling */
.visiblemodal {
	position: relative;
	top: auto;
	right: auto;
	left: auto;
	bottom: auto;
	z-index: 0;
	display: block;
	overflow: hidden;
}
</style>

    <ol class="breadcrumb">
		<li><a href="#/">Dashboard</a></li>
		<li>UI Components</li>
		<li class="active">Modal Boxes</li>
	</ol>


<div class="container-fluid" ng-controller="ModalsDemoController">

	<script type="text/ng-template" id="myModalContent.html">
	    <div class="modal-header">
	        <h4 class="modal-title">This is a modal!</h4>
	    </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-warning" ng-click="cancel()">Cancel</button>
	    </div>
	</script>

			<div class="row">
				<div class="col-md-12">
					<tabset panel-tabs="true" panel-class="panel-transparent" heading="Modals">
						<tab>
							<tab-heading>
								<i class="ti ti-desktop"></i>
							</tab-heading>
							<p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
							<h4>Static example</h4>
							<p>A rendered modal with header, body, and set of actions in the footer.</p>
							<div class="modal visiblemodal">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
											<h4 class="modal-title">Modal title</h4>
										</div>
										<div class="modal-body">
											<p>One fine body…</p>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
											<button type="button" class="btn btn-primary">Save changes</button>
										</div>
									</div><!-- /.modal-content -->
								</div><!-- /.modal-dialog -->
							</div><!-- /.modal -->

							<h4>Live demo</h4>
							<p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page. You can select an item from the list of choices and it will be selected upon 'OK'.</p>

						    <p ng-show="selected"><span class="label label-default">{{ selected }}</span> selected from modal.</p>
						    <button class="btn btn-primary" ng-click="open()">Open me!</button>
						    <button class="btn btn-primary" ng-click="open('lg')">Large modal</button>
						    <button class="btn btn-primary" ng-click="open('sm')">Small modal</button>
						</tab>

						<tab>
							<tab-heading>
								<i class="ti ti-settings"></i>
							</tab-heading>
							<p>Modals can be invoked through a combination of a template definition and some Javascript Code. Check it out!</p>

<script type="text/ng-template" id="demoModalContent.html">
    <div class="modal-header">
        <h4 class="modal-title">This is a modal!</h4>
    </div>
    <div class="modal-body">
    	Modal content goes here
    </div>
    <div class="modal-footer">
        <button class="btn btn-warning" ng-click="close()">Cancel</button>
    </div>
</script>

<tabset>
<tab heading="HTML">
<pre class="prettyprint linenums">
&lt;script type=&quot;text/ng-template&quot; id=&quot;demoModalContent.html&quot;&gt;
    &lt;div class=&quot;modal-header&quot;&gt;
        &lt;h3 class=&quot;modal-title&quot;&gt;This is a modal!&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class=&quot;modal-body&quot;&gt;
    	Modal content goes here
    &lt;/div&gt;
    &lt;div class=&quot;modal-footer&quot;&gt;
        &lt;button class=&quot;btn btn-warning&quot; ng-click=&quot;close()&quot;&gt;Cancel&lt;/button&gt;
    &lt;/div&gt;
&lt;/script&gt;

&lt;button class=&quot;btn btn-primary&quot; ng-click=&quot;openDemoModal('lg')&quot;&gt;Open Modal&lt;/button&gt;
</pre>
</tab>
<tab heading="JavaScript">
<pre class="prettyprint linenums">
// inside the controller
$scope.openDemoModal = function (size) {
  var modalInstance = $modal.open({
    templateUrl: 'demoModalContent.html',
    controller: function ($scope, $modalInstance) {
      $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
      };
    },
    size: size,
  });
}
</pre>
</tab>
</tabset>

<p>Click the button below to open the demo modal.</p>
<button class="btn btn-primary" ng-click="openDemoModal('lg')">Open Modal</button>

						</tab>
					</tabset>
		</div>
	</div>

</div> <!-- container-fluid -->
