plastic-hub-dev-node-saturn
134 lines
8.3 KiB
Handlebars
134 lines
8.3 KiB
Handlebars
{{#extend "layout"}}
|
||
{{#replace "sidebar"}}
|
||
{{> sidebar this conditionClass=conditionClass active="ui_dialogs"}}
|
||
{{/replace}}
|
||
{{#replace "app_content"}}
|
||
<h2 class="page-title">Dialogs <small>Normal & blocking dialog</small></h2>
|
||
<div class="row">
|
||
<div class="col-md-5 col-md-offset-1">
|
||
<section class="widget">
|
||
<header>
|
||
<h5>
|
||
<i class="fa fa-magic"></i>
|
||
Dialogs
|
||
</h5>
|
||
</header>
|
||
<div class="body">
|
||
<div class="modal" style="position: relative; top: auto; right: auto; left: auto; bottom: auto; z-index: 1; display: block; overflow: hidden;">
|
||
<div class="modal-dialog" style="width: auto; padding: 0;">
|
||
<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>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<div class="col-md-5">
|
||
<section class="widget">
|
||
<header>
|
||
<h5>
|
||
<i class="fa fa-bolt"></i>
|
||
Live Demo
|
||
</h5>
|
||
</header>
|
||
<div class="body">
|
||
<button type="button" class="btn btn-danger btn-lg btn-block"
|
||
data-toggle="modal" data-target="#myModal">Launch modal</button>
|
||
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
|
||
<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" id="myModalLabel">Modal Heading</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<h4>Text in a modal</h4>
|
||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||
|
||
<h4>Popover in a modal</h4>
|
||
<p>This <a href="#" role="button" class="btn btn-default popover-test" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">button</a> should trigger a popover on click.</p>
|
||
|
||
<h4>Tooltips in a modal</h4>
|
||
<p><a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="" data-original-title="Tooltip">that link</a> should have tooltips on hover.</p>
|
||
|
||
<hr>
|
||
|
||
<h4>Blah blah blah text</h4>
|
||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</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>
|
||
</div>
|
||
</section>
|
||
<section class="widget">
|
||
<header>
|
||
<h5>
|
||
<i class="fa fa-ban"></i>
|
||
Blocking one
|
||
</h5>
|
||
</header>
|
||
<div class="body">
|
||
<button type="button" class="btn btn-warning btn-lg btn-block"
|
||
data-toggle="modal" data-target="#myModal2" data-backdrop="static">Launch blocking modal</button>
|
||
<div id="myModal2" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
|
||
<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" id="myModalLabel2">Modal Heading</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<h4>Text in a modal</h4>
|
||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||
|
||
<h4>Popover in a modal</h4>
|
||
<p>This <a href="#" role="button" class="btn btn-default popover-test" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">button</a> should trigger a popover on click.</p>
|
||
|
||
<h4>Tooltips in a modal</h4>
|
||
<p><a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="" data-original-title="Tooltip">that link</a> should have tooltips on hover.</p>
|
||
|
||
<hr>
|
||
|
||
<h4>Blah blah blah text</h4>
|
||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</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>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
{{/replace}}
|
||
|
||
{{#append "scripts"}}
|
||
<!-- page application js -->
|
||
<script src="js/ui-dialogs.js"></script>
|
||
{{/append}}
|
||
{{/extend}} |