1037 lines
40 KiB
HTML
1037 lines
40 KiB
HTML
<!DOCTYPE html>
|
||
<!--
|
||
|
||
TABLE OF CONTENTS.
|
||
|
||
Use search to find needed section.
|
||
|
||
=====================================================================
|
||
|
||
| 1. $BODY | Body |
|
||
| 2. $MAIN_NAVIGATION | Main navigation |
|
||
| 3. $NAVBAR_ICON_BUTTONS | Navbar Icon Buttons |
|
||
| 4. $MAIN_MENU | Main menu |
|
||
| 5. $DEFAULT_MODAL | Default modal |
|
||
| 6. $MODALS_BLURRED_BACKGROUND | Modal with blurred background |
|
||
| 7. $MODAL_SIZES | Modal sizes |
|
||
| 8. $MODALS_EFFECTS | Effects |
|
||
| 9. $MODAL_ALERTS | Modal alerts |
|
||
| 10. $JQUERY_BOOTBOX | jQuery Bootbox |
|
||
|
||
=====================================================================
|
||
|
||
-->
|
||
|
||
|
||
<!--[if IE 8]> <html class="ie8"> <![endif]-->
|
||
<!--[if IE 9]> <html class="ie9 gt-ie8"> <![endif]-->
|
||
<!--[if gt IE 9]><!--> <html class="gt-ie8 gt-ie9 not-ie"> <!--<![endif]-->
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<title>Modals - UI Elements - PixelAdmin</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
||
|
||
<!-- Open Sans font from Google CDN -->
|
||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300&subset=latin" rel="stylesheet" type="text/css">
|
||
|
||
<!-- Pixel Admin's stylesheets -->
|
||
<link href="assets/stylesheets/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||
<link href="assets/stylesheets/pixel-admin.min.css" rel="stylesheet" type="text/css">
|
||
<link href="assets/stylesheets/widgets.min.css" rel="stylesheet" type="text/css">
|
||
<link href="assets/stylesheets/rtl.min.css" rel="stylesheet" type="text/css">
|
||
<link href="assets/stylesheets/themes.min.css" rel="stylesheet" type="text/css">
|
||
|
||
<!--[if lt IE 9]>
|
||
<script src="assets/javascripts/ie.min.js"></script>
|
||
<![endif]-->
|
||
|
||
</head>
|
||
|
||
|
||
<!-- 1. $BODY ======================================================================================
|
||
|
||
Body
|
||
|
||
Classes:
|
||
* 'theme-{THEME NAME}'
|
||
* 'right-to-left' - Sets text direction to right-to-left
|
||
* 'main-menu-right' - Places the main menu on the right side
|
||
* 'no-main-menu' - Hides the main menu
|
||
* 'main-navbar-fixed' - Fixes the main navigation
|
||
* 'main-menu-fixed' - Fixes the main menu
|
||
* 'main-menu-animated' - Animate main menu
|
||
-->
|
||
<body class="theme-default main-menu-animated">
|
||
|
||
<script>var init = [];</script>
|
||
<!-- Demo script --> <script src="assets/demo/demo.js"></script> <!-- / Demo script -->
|
||
|
||
<div id="main-wrapper">
|
||
|
||
|
||
<!-- 2. $MAIN_NAVIGATION ===========================================================================
|
||
|
||
Main navigation
|
||
-->
|
||
<div id="main-navbar" class="navbar navbar-inverse" role="navigation">
|
||
<!-- Main menu toggle -->
|
||
<button type="button" id="main-menu-toggle"><i class="navbar-icon fa fa-bars icon"></i><span class="hide-menu-text">HIDE MENU</span></button>
|
||
|
||
<div class="navbar-inner">
|
||
<!-- Main navbar header -->
|
||
<div class="navbar-header">
|
||
|
||
<!-- Logo -->
|
||
<a href="index.html" class="navbar-brand">
|
||
<div><img alt="Pixel Admin" src="assets/images/pixel-admin/main-navbar-logo.png"></div>
|
||
PixelAdmin
|
||
</a>
|
||
|
||
<!-- Main navbar toggle -->
|
||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar-collapse"><i class="navbar-icon fa fa-bars"></i></button>
|
||
|
||
</div> <!-- / .navbar-header -->
|
||
|
||
<div id="main-navbar-collapse" class="collapse navbar-collapse main-navbar-collapse">
|
||
<div>
|
||
<ul class="nav navbar-nav">
|
||
<li>
|
||
<a href="#">Home</a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">First item</a></li>
|
||
<li><a href="#">Second item</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Third item</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul> <!-- / .navbar-nav -->
|
||
|
||
<div class="right clearfix">
|
||
<ul class="nav navbar-nav pull-right right-navbar-nav">
|
||
|
||
<!-- 3. $NAVBAR_ICON_BUTTONS =======================================================================
|
||
|
||
Navbar Icon Buttons
|
||
|
||
NOTE: .nav-icon-btn triggers a dropdown menu on desktop screens only. On small screens .nav-icon-btn acts like a hyperlink.
|
||
|
||
Classes:
|
||
* 'nav-icon-btn-info'
|
||
* 'nav-icon-btn-success'
|
||
* 'nav-icon-btn-warning'
|
||
* 'nav-icon-btn-danger'
|
||
-->
|
||
<li class="nav-icon-btn nav-icon-btn-danger dropdown">
|
||
<a href="#notifications" class="dropdown-toggle" data-toggle="dropdown">
|
||
<span class="label">5</span>
|
||
<i class="nav-icon fa fa-bullhorn"></i>
|
||
<span class="small-screen-text">Notifications</span>
|
||
</a>
|
||
|
||
<!-- NOTIFICATIONS -->
|
||
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#main-navbar-notifications').slimScroll({ height: 250 });
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="dropdown-menu widget-notifications no-padding" style="width: 300px">
|
||
<div class="notifications-list" id="main-navbar-notifications">
|
||
|
||
<div class="notification">
|
||
<div class="notification-title text-danger">SYSTEM</div>
|
||
<div class="notification-description"><strong>Error 500</strong>: Syntax error in index.php at line <strong>461</strong>.</div>
|
||
<div class="notification-ago">12h ago</div>
|
||
<div class="notification-icon fa fa-hdd-o bg-danger"></div>
|
||
</div> <!-- / .notification -->
|
||
|
||
<div class="notification">
|
||
<div class="notification-title text-info">STORE</div>
|
||
<div class="notification-description">You have <strong>9</strong> new orders.</div>
|
||
<div class="notification-ago">12h ago</div>
|
||
<div class="notification-icon fa fa-truck bg-info"></div>
|
||
</div> <!-- / .notification -->
|
||
|
||
<div class="notification">
|
||
<div class="notification-title text-default">CRON DAEMON</div>
|
||
<div class="notification-description">Job <strong>"Clean DB"</strong> has been completed.</div>
|
||
<div class="notification-ago">12h ago</div>
|
||
<div class="notification-icon fa fa-clock-o bg-default"></div>
|
||
</div> <!-- / .notification -->
|
||
|
||
<div class="notification">
|
||
<div class="notification-title text-success">SYSTEM</div>
|
||
<div class="notification-description">Server <strong>up</strong>.</div>
|
||
<div class="notification-ago">12h ago</div>
|
||
<div class="notification-icon fa fa-hdd-o bg-success"></div>
|
||
</div> <!-- / .notification -->
|
||
|
||
<div class="notification">
|
||
<div class="notification-title text-warning">SYSTEM</div>
|
||
<div class="notification-description"><strong>Warning</strong>: Processor load <strong>92%</strong>.</div>
|
||
<div class="notification-ago">12h ago</div>
|
||
<div class="notification-icon fa fa-hdd-o bg-warning"></div>
|
||
</div> <!-- / .notification -->
|
||
|
||
</div> <!-- / .notifications-list -->
|
||
<a href="#" class="notifications-link">MORE NOTIFICATIONS</a>
|
||
</div> <!-- / .dropdown-menu -->
|
||
</li>
|
||
<li class="nav-icon-btn nav-icon-btn-success dropdown">
|
||
<a href="#messages" class="dropdown-toggle" data-toggle="dropdown">
|
||
<span class="label">10</span>
|
||
<i class="nav-icon fa fa-envelope"></i>
|
||
<span class="small-screen-text">Income messages</span>
|
||
</a>
|
||
|
||
<!-- MESSAGES -->
|
||
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#main-navbar-messages').slimScroll({ height: 250 });
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="dropdown-menu widget-messages-alt no-padding" style="width: 300px;">
|
||
<div class="messages-list" id="main-navbar-messages">
|
||
|
||
<div class="message">
|
||
<img src="assets/demo/avatars/2.jpg" alt="" class="message-avatar">
|
||
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
|
||
<div class="message-description">
|
||
from <a href="#">Robert Jang</a>
|
||
·
|
||
2h ago
|
||
</div>
|
||
</div> <!-- / .message -->
|
||
|
||
<div class="message">
|
||
<img src="assets/demo/avatars/3.jpg" alt="" class="message-avatar">
|
||
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
||
<div class="message-description">
|
||
from <a href="#">Michelle Bortz</a>
|
||
·
|
||
2h ago
|
||
</div>
|
||
</div> <!-- / .message -->
|
||
|
||
<div class="message">
|
||
<img src="assets/demo/avatars/4.jpg" alt="" class="message-avatar">
|
||
<a href="#" class="message-subject">Lorem ipsum dolor sit amet.</a>
|
||
<div class="message-description">
|
||
from <a href="#">Timothy Owens</a>
|
||
·
|
||
2h ago
|
||
</div>
|
||
</div> <!-- / .message -->
|
||
|
||
<div class="message">
|
||
<img src="assets/demo/avatars/5.jpg" alt="" class="message-avatar">
|
||
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
||
<div class="message-description">
|
||
from <a href="#">Denise Steiner</a>
|
||
·
|
||
2h ago
|
||
</div>
|
||
</div> <!-- / .message -->
|
||
|
||
<div class="message">
|
||
<img src="assets/demo/avatars/2.jpg" alt="" class="message-avatar">
|
||
<a href="#" class="message-subject">Lorem ipsum dolor sit amet.</a>
|
||
<div class="message-description">
|
||
from <a href="#">Robert Jang</a>
|
||
·
|
||
2h ago
|
||
</div>
|
||
</div> <!-- / .message -->
|
||
|
||
<div class="message">
|
||
<img src="assets/demo/avatars/2.jpg" alt="" class="message-avatar">
|
||
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
|
||
<div class="message-description">
|
||
from <a href="#">Robert Jang</a>
|
||
·
|
||
2h ago
|
||
</div>
|
||
</div> <!-- / .message -->
|
||
|
||
<div class="message">
|
||
<img src="assets/demo/avatars/3.jpg" alt="" class="message-avatar">
|
||
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
||
<div class="message-description">
|
||
from <a href="#">Michelle Bortz</a>
|
||
·
|
||
2h ago
|
||
</div>
|
||
</div> <!-- / .message -->
|
||
|
||
<div class="message">
|
||
<img src="assets/demo/avatars/4.jpg" alt="" class="message-avatar">
|
||
<a href="#" class="message-subject">Lorem ipsum dolor sit amet.</a>
|
||
<div class="message-description">
|
||
from <a href="#">Timothy Owens</a>
|
||
·
|
||
2h ago
|
||
</div>
|
||
</div> <!-- / .message -->
|
||
|
||
<div class="message">
|
||
<img src="assets/demo/avatars/5.jpg" alt="" class="message-avatar">
|
||
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
||
<div class="message-description">
|
||
from <a href="#">Denise Steiner</a>
|
||
·
|
||
2h ago
|
||
</div>
|
||
</div> <!-- / .message -->
|
||
|
||
<div class="message">
|
||
<img src="assets/demo/avatars/2.jpg" alt="" class="message-avatar">
|
||
<a href="#" class="message-subject">Lorem ipsum dolor sit amet.</a>
|
||
<div class="message-description">
|
||
from <a href="#">Robert Jang</a>
|
||
·
|
||
2h ago
|
||
</div>
|
||
</div> <!-- / .message -->
|
||
|
||
</div> <!-- / .messages-list -->
|
||
<a href="#" class="messages-link">MORE MESSAGES</a>
|
||
</div> <!-- / .dropdown-menu -->
|
||
</li>
|
||
<!-- /3. $END_NAVBAR_ICON_BUTTONS -->
|
||
|
||
<li>
|
||
<form class="navbar-form pull-left">
|
||
<input type="text" class="form-control" placeholder="Search">
|
||
</form>
|
||
</li>
|
||
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle user-menu" data-toggle="dropdown">
|
||
<img src="assets/demo/avatars/1.jpg">
|
||
<span>John Doe</span>
|
||
</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#"><span class="label label-warning pull-right">New</span>Profile</a></li>
|
||
<li><a href="#"><span class="badge badge-primary pull-right">New</span>Account</a></li>
|
||
<li><a href="#"><i class="dropdown-icon fa fa-cog"></i> Settings</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="pages-signin.html"><i class="dropdown-icon fa fa-power-off"></i> Log Out</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul> <!-- / .navbar-nav -->
|
||
</div> <!-- / .right -->
|
||
</div>
|
||
</div> <!-- / #main-navbar-collapse -->
|
||
</div> <!-- / .navbar-inner -->
|
||
</div> <!-- / #main-navbar -->
|
||
<!-- /2. $END_MAIN_NAVIGATION -->
|
||
|
||
|
||
<!-- 4. $MAIN_MENU =================================================================================
|
||
|
||
Main menu
|
||
|
||
Notes:
|
||
* to make the menu item active, add a class 'active' to the <li>
|
||
example: <li class="active">...</li>
|
||
* multilevel submenu example:
|
||
<li class="mm-dropdown">
|
||
<a href="#"><span class="mm-text">Submenu item text 1</span></a>
|
||
<ul>
|
||
<li>...</li>
|
||
<li class="mm-dropdown">
|
||
<a href="#"><span class="mm-text">Submenu item text 2</span></a>
|
||
<ul>
|
||
<li>...</li>
|
||
...
|
||
</ul>
|
||
</li>
|
||
...
|
||
</ul>
|
||
</li>
|
||
-->
|
||
<div id="main-menu" role="navigation">
|
||
<div id="main-menu-inner">
|
||
<div class="menu-content top" id="menu-content-demo">
|
||
<!-- Menu custom content demo
|
||
CSS: styles/pixel-admin-less/demo.less or styles/pixel-admin-scss/_demo.scss
|
||
Javascript: html/assets/demo/demo.js
|
||
-->
|
||
<div>
|
||
<div class="text-bg"><span class="text-slim">Welcome,</span> <span class="text-semibold">John</span></div>
|
||
|
||
<img src="assets/demo/avatars/1.jpg" alt="" class="">
|
||
<div class="btn-group">
|
||
<a href="#" class="btn btn-xs btn-primary btn-outline dark"><i class="fa fa-envelope"></i></a>
|
||
<a href="#" class="btn btn-xs btn-primary btn-outline dark"><i class="fa fa-user"></i></a>
|
||
<a href="#" class="btn btn-xs btn-primary btn-outline dark"><i class="fa fa-cog"></i></a>
|
||
<a href="#" class="btn btn-xs btn-danger btn-outline dark"><i class="fa fa-power-off"></i></a>
|
||
</div>
|
||
<a href="#" class="close">×</a>
|
||
</div>
|
||
</div>
|
||
<ul class="navigation">
|
||
<li>
|
||
<a href="index.html"><i class="menu-icon fa fa-dashboard"></i><span class="mm-text">Dashboard</span></a>
|
||
</li>
|
||
<li class="mm-dropdown">
|
||
<a href="#"><i class="menu-icon fa fa-th"></i><span class="mm-text">Layouts</span><span class="label label-warning">Updated</span></a>
|
||
<ul>
|
||
<li>
|
||
<a tabindex="-1" href="layouts-grid.html"><span class="mm-text">Grid</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="layouts-main-menu.html"><i class="menu-icon fa fa-th-list"></i><span class="mm-text">Main menu</span><span class="label label-warning">Updated</span></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="stat-panels.html"><i class="menu-icon fa fa-tasks"></i><span class="mm-text">Stat panels</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="widgets.html"><i class="menu-icon fa fa-flask"></i><span class="mm-text">Widgets</span></a>
|
||
</li>
|
||
<li class="mm-dropdown">
|
||
<a href="#"><i class="menu-icon fa fa-desktop"></i><span class="mm-text">UI elements</span></a>
|
||
<ul>
|
||
<li>
|
||
<a tabindex="-1" href="ui-buttons.html"><span class="mm-text">Buttons</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="ui-typography.html"><span class="mm-text">Typography</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="ui-tabs.html"><span class="mm-text">Tabs & Accordions</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="ui-modals.html"><span class="mm-text">Modals</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="ui-alerts.html"><span class="mm-text">Alerts & Tooltips</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="ui-components.html"><span class="mm-text">Components</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="ui-panels.html"><span class="mm-text">Panels</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="ui-jqueryui.html"><span class="mm-text">jQuery UI</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="ui-icons.html"><span class="mm-text">Icons</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="ui-utility-classes.html"><span class="mm-text">Utility classes</span></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="mm-dropdown">
|
||
<a href="#"><i class="menu-icon fa fa-check-square"></i><span class="mm-text">Form components</span></a>
|
||
<ul>
|
||
<li>
|
||
<a tabindex="-1" href="forms-layouts.html"><span class="mm-text">Layouts</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="forms-general.html"><span class="mm-text">General</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="forms-advanced.html"><span class="mm-text">Advanced</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="forms-pickers.html"><span class="mm-text">Pickers</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="forms-validation.html"><span class="mm-text">Validation</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="forms-editors.html"><span class="mm-text">Editors</span></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="tables.html"><i class="menu-icon fa fa-table"></i><span class="mm-text">Tables</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="charts.html"><i class="menu-icon fa fa-bar-chart-o"></i><span class="mm-text">Charts</span></a>
|
||
</li>
|
||
<li class="mm-dropdown">
|
||
<a href="#"><i class="menu-icon fa fa-files-o"></i><span class="mm-text">Pages</span><span class="label label-success">16</span></a>
|
||
<ul>
|
||
<li>
|
||
<a tabindex="-1" href="pages-search.html"><span class="mm-text">Search results</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-pricing.html"><span class="mm-text">Plans & pricing</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-faq.html"><span class="mm-text">FAQ</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-profile.html"><span class="mm-text">Profile</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-timeline.html"><span class="mm-text">Timeline</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-signin.html"><span class="mm-text">Sign In</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-signup.html"><span class="mm-text">Sign Up</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-signin-alt.html"><span class="mm-text">Sign In Alt</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-signup-alt.html"><span class="mm-text">Sign Up Alt</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-invoice.html"><span class="mm-text">Invoice</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-404.html"><span class="mm-text">Error 404</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-500.html"><span class="mm-text">Error 500</span></a>
|
||
</li>
|
||
<li class="mm-dropdown">
|
||
<a href="#"><i class="menu-icon fa fa-envelope"></i><span class="mm-text">Messages</span></a>
|
||
<ul>
|
||
<li>
|
||
<a tabindex="-1" href="pages-inbox.html"><span class="mm-text">Inbox</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-show-email.html"><span class="mm-text">Show message</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-new-email.html"><span class="mm-text">New message</span></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-blank.html"><span class="mm-text">Blank page</span></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="complete-ui.html"><i class="menu-icon fa fa-briefcase"></i><span class="mm-text">Complete UI</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="color-builder.html"><i class="menu-icon fa fa-tint"></i><span class="mm-text">Color Builder</span></a>
|
||
</li>
|
||
<li class="mm-dropdown">
|
||
<a href="#"><i class="menu-icon fa fa-sitemap"></i><span class="mm-text">Menu levels</span><span class="badge badge-primary">6</span></a>
|
||
<ul>
|
||
<li>
|
||
<a tabindex="-1" href="#"><span class="mm-text">Menu level 1.1</span><span class="badge badge-danger">12</span><span class="label label-info">21</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="#"><span class="mm-text">Menu level 1.2</span></a>
|
||
</li>
|
||
<li class="mm-dropdown">
|
||
<a tabindex="-1" href="#"><span class="mm-text">Menu level 1.3</span><span class="label label-warning">5</span></a>
|
||
<ul>
|
||
<li>
|
||
<a tabindex="-1" href="#"><span class="mm-text">Menu level 2.1</span></a>
|
||
</li>
|
||
<li class="mm-dropdown">
|
||
<a tabindex="-1" href="#"><span class="mm-text">Menu level 2.2</span></a>
|
||
<ul>
|
||
<li class="mm-dropdown">
|
||
<a tabindex="-1" href="#"><span class="mm-text">Menu level 3.1</span></a>
|
||
<ul>
|
||
<li>
|
||
<a tabindex="-1" href="#"><span class="mm-text">Menu level 4.1</span></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="#"><span class="mm-text">Menu level 3.2</span></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="#"><span class="mm-text">Menu level 2.2</span></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul> <!-- / .navigation -->
|
||
<div class="menu-content">
|
||
<a href="pages-invoice.html" class="btn btn-primary btn-block btn-outline dark">Create Invoice</a>
|
||
</div>
|
||
</div> <!-- / #main-menu-inner -->
|
||
</div> <!-- / #main-menu -->
|
||
<!-- /4. $MAIN_MENU -->
|
||
|
||
|
||
<div id="content-wrapper">
|
||
|
||
<div class="page-header">
|
||
<h1><span class="text-light-gray">UI Elements / </span>Modals</h1>
|
||
</div> <!-- / .page-header -->
|
||
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
|
||
<!-- 5. $DEFAULT_MODAL =============================================================================
|
||
|
||
Default modal
|
||
-->
|
||
<!-- Modal -->
|
||
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" 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>Overflowing text to show scroll behavior</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>
|
||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||
<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>
|
||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||
<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>
|
||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||
</div> <!-- / .modal-body -->
|
||
<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 -->
|
||
<!-- / Modal -->
|
||
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">Default modal</span>
|
||
</div>
|
||
<div class="panel-body">
|
||
<!-- Button trigger modal -->
|
||
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
|
||
</div>
|
||
</div>
|
||
<!-- /5. $DEFAULT_MODAL -->
|
||
|
||
<!-- 6. $MODALS_BLURRED_BACKGROUND =================================================================
|
||
|
||
Modal with blurred background
|
||
|
||
To enable blurred background effect just add class .modal-blur to the .modal
|
||
-->
|
||
<!-- Template -->
|
||
<div id="modal-blurred-bg" class="modal fade modal-blur" tabindex="-1" role="dialog" style="display: none;">
|
||
<div class="modal-dialog modal-sm">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||
<h4 class="modal-title">Modal with blurred background</h4>
|
||
</div>
|
||
<div class="modal-body">...</div>
|
||
</div> <!-- / .modal-content -->
|
||
</div> <!-- / .modal-dialog -->
|
||
</div> <!-- / .modal -->
|
||
<!-- / Template -->
|
||
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">Modal with blurred background</span>
|
||
</div>
|
||
<div class="panel-body">
|
||
<div class="note note-danger">Use this feature with caution because it can be slow and buggy on large pages.</div>
|
||
<button class="btn btn-success" data-toggle="modal" data-target="#modal-blurred-bg">Modal with blurred background</button>
|
||
</div>
|
||
</div>
|
||
<!-- /6. $MODALS_BLURRED_BACKGROUND -->
|
||
|
||
</div>
|
||
<div class="col-sm-6">
|
||
|
||
<!-- 7. $MODAL_SIZES ===============================================================================
|
||
|
||
Modal sizes
|
||
-->
|
||
<!-- Small modal -->
|
||
<div id="modal-sizes-1" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
|
||
<div class="modal-dialog modal-sm">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
<h4 class="modal-title">Small modal</h4>
|
||
</div>
|
||
<div class="modal-body">...</div>
|
||
</div> <!-- / .modal-content -->
|
||
</div> <!-- / .modal-dialog -->
|
||
</div> <!-- / .modal -->
|
||
<!-- / Small modal -->
|
||
|
||
<!-- Large modal -->
|
||
<div id="modal-sizes-2" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
|
||
<div class="modal-dialog modal-lg">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
<h4 class="modal-title">Large modal</h4>
|
||
</div>
|
||
<div class="modal-body">...</div>
|
||
</div> <!-- / .modal-content -->
|
||
</div> <!-- / .modal-dialog -->
|
||
</div> <!-- / .modal -->
|
||
<!-- / Large modal -->
|
||
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">Modal sizes</span>
|
||
</div>
|
||
<div class="panel-body">
|
||
<button class="btn" data-toggle="modal" data-target="#modal-sizes-1">Small modal</button>
|
||
<button class="btn" data-toggle="modal" data-target="#modal-sizes-2">Large modal</button>
|
||
</div>
|
||
</div>
|
||
<!-- /7. $MODAL_SIZES -->
|
||
|
||
<!-- 8. $MODALS_EFFECTS ============================================================================
|
||
|
||
Effects
|
||
|
||
To use custom modal animations just add classes .animated and .{ANIMATION NAME} to .modal-dialog
|
||
-->
|
||
<!-- Template -->
|
||
<div id="uidemo-modals-effects-template" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
|
||
<div>
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
<h4 class="modal-title">Small modal</h4>
|
||
</div>
|
||
<div class="modal-body">...</div>
|
||
</div><!-- / .modal-content -->
|
||
</div><!-- / .modal-dialog -->
|
||
</div>
|
||
<!-- / Template -->
|
||
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function() {
|
||
$('#uidemo-modals-effects-btn').on('click', function() {
|
||
var $modal = $('#uidemo-modals-effects-template').clone(true);
|
||
$modal.find('> div').addClass('modal-dialog modal-sm animated ' + $('#uidemo-modals-effects-select').find(":selected").attr('value'));
|
||
$modal.modal('show');
|
||
})
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">Effects</span>
|
||
</div>
|
||
<div class="panel-body">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<select id="uidemo-modals-effects-select" class="form-control">
|
||
<optgroup label="Attention Seekers">
|
||
<option value="bounce">bounce</option>
|
||
<option value="flash">flash</option>
|
||
<option value="pulse">pulse</option>
|
||
<option value="shake">shake</option>
|
||
<option value="swing">swing</option>
|
||
<option value="tada">tada</option>
|
||
<option value="wobble">wobble</option>
|
||
</optgroup>
|
||
|
||
<optgroup label="Bouncing Entrances">
|
||
<option value="bounceIn">bounceIn</option>
|
||
<option value="bounceInDown">bounceInDown</option>
|
||
<option value="bounceInLeft">bounceInLeft</option>
|
||
<option value="bounceInRight">bounceInRight</option>
|
||
<option value="bounceInUp">bounceInUp</option>
|
||
</optgroup>
|
||
|
||
<optgroup label="Fading Entrances">
|
||
<option value="fadeIn">fadeIn</option>
|
||
<option value="fadeInDown">fadeInDown</option>
|
||
<option value="fadeInDownBig">fadeInDownBig</option>
|
||
<option value="fadeInLeft">fadeInLeft</option>
|
||
<option value="fadeInLeftBig">fadeInLeftBig</option>
|
||
<option value="fadeInRight">fadeInRight</option>
|
||
<option value="fadeInRightBig">fadeInRightBig</option>
|
||
<option value="fadeInUp">fadeInUp</option>
|
||
<option value="fadeInUpBig">fadeInUpBig</option>
|
||
</optgroup>
|
||
|
||
<optgroup label="Flippers">
|
||
<option value="flip">flip</option>
|
||
<option value="flipInX">flipInX</option>
|
||
<option value="flipInY">flipInY</option>
|
||
</optgroup>
|
||
|
||
<optgroup label="Lightspeed">
|
||
<option value="lightSpeedIn">lightSpeedIn</option>
|
||
</optgroup>
|
||
|
||
<optgroup label="Rotating Entrances">
|
||
<option value="rotateIn">rotateIn</option>
|
||
<option value="rotateInDownLeft">rotateInDownLeft</option>
|
||
<option value="rotateInDownRight">rotateInDownRight</option>
|
||
<option value="rotateInUpLeft">rotateInUpLeft</option>
|
||
<option value="rotateInUpRight">rotateInUpRight</option>
|
||
</optgroup>
|
||
|
||
<optgroup label="Sliders">
|
||
<option value="slideInDown">slideInDown</option>
|
||
<option value="slideInLeft">slideInLeft</option>
|
||
<option value="slideInRight">slideInRight</option>
|
||
</optgroup>
|
||
|
||
<optgroup label="Specials">
|
||
<option value="rollIn">rollIn</option>
|
||
</optgroup>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<button class="btn" id="uidemo-modals-effects-btn">Show Modal</button>
|
||
</div>
|
||
</div>
|
||
<br><em>see <a href="http://daneden.github.io/animate.css/" target="_blank">http://daneden.github.io/animate.css/</a></em>
|
||
</div>
|
||
</div>
|
||
<!-- /8. $MODALS_EFFECTS -->
|
||
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
|
||
<!-- 9. $MODAL_ALERTS ==============================================================================
|
||
|
||
Modal alerts
|
||
-->
|
||
<!-- Success -->
|
||
<div id="uidemo-modals-alerts-success" class="modal modal-alert modal-success fade">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<i class="fa fa-check-circle"></i>
|
||
</div>
|
||
<div class="modal-title">Some alert title</div>
|
||
<div class="modal-body">Some alert text</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-success" data-dismiss="modal">OK</button>
|
||
</div>
|
||
</div> <!-- / .modal-content -->
|
||
</div> <!-- / .modal-dialog -->
|
||
</div> <!-- / .modal -->
|
||
<!-- / Success -->
|
||
|
||
<!-- Danger -->
|
||
<div id="uidemo-modals-alerts-danger" class="modal modal-alert modal-danger fade">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<i class="fa fa-times-circle"></i>
|
||
</div>
|
||
<div class="modal-title">Some alert title</div>
|
||
<div class="modal-body">Some alert text</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-danger" data-dismiss="modal">OK</button>
|
||
</div>
|
||
</div> <!-- / .modal-content -->
|
||
</div> <!-- / .modal-dialog -->
|
||
</div> <!-- / .modal -->
|
||
<!-- / Danger -->
|
||
|
||
<!-- Warning -->
|
||
<div id="uidemo-modals-alerts-warning" class="modal modal-alert modal-warning fade">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<i class="fa fa-warning"></i>
|
||
</div>
|
||
<div class="modal-title">Some alert title</div>
|
||
<div class="modal-body">Some alert text</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-warning" data-dismiss="modal">OK</button>
|
||
</div>
|
||
</div> <!-- / .modal-content -->
|
||
</div> <!-- / .modal-dialog -->
|
||
</div> <!-- / .modal -->
|
||
<!-- / Warning -->
|
||
|
||
<!-- Info -->
|
||
<div id="uidemo-modals-alerts-info" class="modal modal-alert modal-info fade">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<i class="fa fa-info-circle"></i>
|
||
</div>
|
||
<div class="modal-title">Some alert title</div>
|
||
<div class="modal-body">Some alert text</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-info" data-dismiss="modal">OK</button>
|
||
</div>
|
||
</div> <!-- / .modal-content -->
|
||
</div> <!-- / .modal-dialog -->
|
||
</div> <!-- / .modal -->
|
||
<!-- / Info -->
|
||
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">Modal alerts</span>
|
||
</div>
|
||
<div class="panel-body">
|
||
<button class="btn btn-success" data-toggle="modal" data-target="#uidemo-modals-alerts-success">Success</button>
|
||
<button class="btn btn-danger" data-toggle="modal" data-target="#uidemo-modals-alerts-danger">Danger</button>
|
||
<button class="btn btn-warning" data-toggle="modal" data-target="#uidemo-modals-alerts-warning">Warning</button>
|
||
<button class="btn btn-info" data-toggle="modal" data-target="#uidemo-modals-alerts-info">Info</button>
|
||
</div>
|
||
</div>
|
||
<!-- /9. $MODAL_ALERTS -->
|
||
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
|
||
<!-- 10. $JQUERY_BOOTBOX ===========================================================================
|
||
|
||
jQuery Bootbox
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#ui-bootbox-alert').on('click', function () {
|
||
bootbox.alert({
|
||
message: "Hello world!",
|
||
callback: function() {
|
||
alert("Hello world callback");
|
||
},
|
||
className: "bootbox-sm"
|
||
});
|
||
});
|
||
$('#ui-bootbox-confirm').on('click', function () {
|
||
bootbox.confirm({
|
||
message: "Are you sure?",
|
||
callback: function(result) {
|
||
alert("Confirm result: " + result);
|
||
},
|
||
className: "bootbox-sm"
|
||
});
|
||
});
|
||
$('#ui-bootbox-prompt').on('click', function () {
|
||
bootbox.prompt({
|
||
title: "What is your name?",
|
||
callback: function(result) {
|
||
if (result === null) {
|
||
alert("Prompt dismissed");
|
||
} else {
|
||
alert("Hi " + result + "!");
|
||
}
|
||
},
|
||
className: "bootbox-sm"
|
||
});
|
||
});
|
||
$('#ui-bootbox-custom').on('click', function () {
|
||
bootbox.dialog({
|
||
message: "I am a custom dialog",
|
||
title: "Custom title",
|
||
buttons: {
|
||
success: {
|
||
label: "Success!",
|
||
className: "btn-success",
|
||
callback: function() {
|
||
alert("great success");
|
||
}
|
||
},
|
||
danger: {
|
||
label: "Danger!",
|
||
className: "btn-danger",
|
||
callback: function() {
|
||
alert("uh oh, look out!");
|
||
}
|
||
},
|
||
main: {
|
||
label: "Click ME!",
|
||
className: "btn-primary",
|
||
callback: function() {
|
||
alert("Primary button");
|
||
}
|
||
}
|
||
},
|
||
className: "bootbox-sm"
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">jQuery Bootbox</span>
|
||
</div>
|
||
<div class="panel-body">
|
||
<button id="ui-bootbox-alert" class="btn btn-lg btn-warning">Alert</button>
|
||
<button id="ui-bootbox-confirm" class="btn btn-lg btn-danger">Confirm</button>
|
||
<button id="ui-bootbox-prompt" class="btn btn-lg btn-success">Prompt</button>
|
||
<button id="ui-bootbox-custom" class="btn btn-lg btn-info">Custom Dialog</button>
|
||
</div>
|
||
</div>
|
||
<!-- /10. $JQUERY_BOOTBOX -->
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div> <!-- / #content-wrapper -->
|
||
<div id="main-menu-bg"></div>
|
||
</div> <!-- / #main-wrapper -->
|
||
|
||
<!-- Get jQuery from Google CDN -->
|
||
<!--[if !IE]> -->
|
||
<script type="text/javascript"> window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">'+"<"+"/script>"); </script>
|
||
<!-- <![endif]-->
|
||
<!--[if lte IE 9]>
|
||
<script type="text/javascript"> window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">'+"<"+"/script>"); </script>
|
||
<![endif]-->
|
||
|
||
|
||
<!-- Pixel Admin's javascripts -->
|
||
<script src="assets/javascripts/bootstrap.min.js"></script>
|
||
<script src="assets/javascripts/pixel-admin.min.js"></script>
|
||
|
||
<script type="text/javascript">
|
||
init.push(function () {
|
||
// Javascript code here
|
||
})
|
||
window.PixelAdmin.start(init);
|
||
</script>
|
||
|
||
</body>
|
||
</html> |