Version 3.0.6

Modals

Modals contain text and UI controls focused on a specific task. They inform users about critical information, require users to make decisions, or involve multiple tasks.

                      
<article class="modal-content panel">
<header class="modal-header panel-header">
<h2 class="panel-title">Delete Record</h2>
<nav class="panel-nav">
<button class="btn btn-link dismiss">
<span aria-hidden="true">×</span>
<span class="reader-only">close modal</span>
</button>
</nav>
</header>
<section class="modal-body panel-content">
<p>Are you sure you want to delete this record? This record will no longer be accessible.</p>
</section>
<footer class="modal-footer panel-footer">
<div class="panel-buttons">
<button class="btn btn-gray">Cancel</button>
<button class="btn btn-red">Delete</button>
</div>
</footer>
</article>
                      
<article class="modal-content panel">
<header class="modal-header panel-header">
<h2 class="panel-title">Create New Email</h2>
<nav class="panel-nav">
<button class="btn btn-link dismiss">
<span aria-hidden="true">×</span>
<span class="reader-only">close modal</span>
</button>
</nav>
</header>
<section class="modal-body panel-content">
<ul class="input-list">
<li class="input-unit">
<label class="input-label">Email Address</label>
<div class="input-control">
<input class="input-element input-element-base" type="email" name="emailName" placeholder="Email Address" />
</div>
</li>
</ul>
</section>
<footer class="modal-footer panel-footer">
<div class="panel-buttons">
<button class="btn btn-gray">Cancel</button>
<button class="btn btn-blue">Create</button>
</div>
</footer>
</article>
                      
<div ng-controller="ModalExample">
<script type="text/ng-template" id="myModalContent.html">
<header class="modal-header panel-header">
<h2 class="panel-title">Delete Record</h2>
<nav class="panel-nav">
<button class="btn btn-link dismiss" ng-click="cancel()">
<span aria-hidden="true">×</span>
<span class="reader-only">close modal</span>
</button>
</nav>
</header>
<section class="modal-body panel-content">
<p>Are you sure you want to delete this record? Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</section>
<footer class="modal-footer panel-footer">
<div class="panel-buttons">
<button class="btn btn-gray" ng-click="cancel()">Cancel</button>
<button class="btn btn-red">Delete</button>
</div>
</footer>
</script>
<button class="btn btn-gray" ng-click="open()">Open Modal</button>
</div>

Search Results

Powered by