1212 lines
79 KiB
HTML
1212 lines
79 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>Modals | Adminox - Responsive Bootstrap 4 Admin Dashboard</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
|
||
<meta content="Coderthemes" name="author" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<!-- App favicon -->
|
||
<link rel="shortcut icon" href="assets/images/favicon.ico">
|
||
|
||
<link href="assets/libs/custombox/custombox.min.css" rel="stylesheet" type="text/css" >
|
||
|
||
<!-- App css -->
|
||
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" id="bootstrap-stylesheet" />
|
||
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
|
||
<link href="assets/css/app.min.css" rel="stylesheet" type="text/css" id="app-stylesheet" />
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!-- Begin page -->
|
||
<div id="wrapper">
|
||
|
||
|
||
<!-- Topbar Start -->
|
||
<div class="navbar-custom">
|
||
<ul class="list-unstyled topnav-menu float-right mb-0">
|
||
|
||
<li class="dropdown notification-list dropdown d-none d-lg-inline-block ml-2">
|
||
<a class="nav-link dropdown-toggle mr-0 waves-effect waves-light" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
|
||
<img src="assets/images/flags/us.jpg" alt="lang-image" height="12">
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-right profile-dropdown ">
|
||
<!-- item-->
|
||
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
||
<img src="assets/images/flags/germany.jpg" alt="lang-image" class="mr-1" height="12"> <span
|
||
class="align-middle">German</span>
|
||
</a>
|
||
|
||
<!-- item-->
|
||
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
||
<img src="assets/images/flags/italy.jpg" alt="lang-image" class="mr-1" height="12"> <span
|
||
class="align-middle">Italian</span>
|
||
</a>
|
||
|
||
<!-- item-->
|
||
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
||
<img src="assets/images/flags/spain.jpg" alt="lang-image" class="mr-1" height="12"> <span
|
||
class="align-middle">Spanish</span>
|
||
</a>
|
||
|
||
<!-- item-->
|
||
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
||
<img src="assets/images/flags/russia.jpg" alt="lang-image" class="mr-1" height="12"> <span
|
||
class="align-middle">Russian</span>
|
||
</a>
|
||
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dropdown notification-list">
|
||
<a class="nav-link dropdown-toggle waves-effect waves-light" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
|
||
<i class="dripicons-bell noti-icon"></i>
|
||
<span class="badge badge-pink rounded-circle noti-icon-badge">4</span>
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-right dropdown-lg">
|
||
|
||
<div class="dropdown-header noti-title">
|
||
<h5 class="text-overflow m-0"><span class="float-right">
|
||
<span class="badge badge-danger float-right">5</span>
|
||
</span>Notification</h5>
|
||
</div>
|
||
|
||
<div class="slimscroll noti-scroll">
|
||
|
||
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
||
<div class="notify-icon bg-success"><i class="mdi mdi-comment-account-outline"></i></div>
|
||
<p class="notify-details">Robert S. Taylor commented on Admin<small class="text-muted">1 min ago</small></p>
|
||
</a>
|
||
|
||
<!-- item-->
|
||
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
||
<div class="notify-icon bg-primary">
|
||
<i class="mdi mdi-settings-outline"></i>
|
||
</div>
|
||
<p class="notify-details">New settings
|
||
<small class="text-muted">There are new settings available</small>
|
||
</p>
|
||
</a>
|
||
|
||
<!-- item-->
|
||
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
||
<div class="notify-icon bg-warning">
|
||
<i class="mdi mdi-bell-outline"></i>
|
||
</div>
|
||
<p class="notify-details">Updates
|
||
<small class="text-muted">There are 2 new updates available</small>
|
||
</p>
|
||
</a>
|
||
|
||
<!-- item-->
|
||
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
||
<div class="notify-icon">
|
||
<img src="assets/images/users/avatar-4.jpg" class="img-fluid rounded-circle" alt="" /> </div>
|
||
<p class="notify-details">Karen Robinson</p>
|
||
<p class="text-muted mb-0 user-msg">
|
||
<small>Wow ! this admin looks good and awesome design</small>
|
||
</p>
|
||
</a>
|
||
|
||
<!-- item-->
|
||
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
||
<div class="notify-icon bg-danger">
|
||
<i class="mdi mdi-account-plus"></i>
|
||
</div>
|
||
<p class="notify-details">New user
|
||
<small class="text-muted">You have 10 unread messages</small>
|
||
</p>
|
||
</a>
|
||
|
||
<!-- item-->
|
||
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
||
<div class="notify-icon bg-info">
|
||
<i class="mdi mdi-comment-account-outline"></i>
|
||
</div>
|
||
<p class="notify-details">Caleb Flakelar commented on Admin
|
||
<small class="text-muted">4 days ago</small>
|
||
</p>
|
||
</a>
|
||
|
||
<!-- item-->
|
||
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
||
<div class="notify-icon bg-secondary">
|
||
<i class="mdi mdi-heart"></i>
|
||
</div>
|
||
<p class="notify-details">Carlos Crouch liked
|
||
<b>Admin</b>
|
||
<small class="text-muted">13 days ago</small>
|
||
</p>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- All-->
|
||
<a href="javascript:void(0);" class="dropdown-item text-center text-primary notify-item notify-all">
|
||
View all
|
||
<i class="fi-arrow-right"></i>
|
||
</a>
|
||
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dropdown notification-list">
|
||
<a class="nav-link dropdown-toggle nav-user mr-0 waves-effect waves-light" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
|
||
<img src="assets/images/users/avatar-1.jpg" alt="user-image" class="rounded-circle">
|
||
<span class="pro-user-name ml-1">
|
||
Maxine K <i class="mdi mdi-chevron-down"></i>
|
||
</span>
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-right profile-dropdown ">
|
||
<!-- item-->
|
||
<div class="dropdown-header noti-title">
|
||
<h6 class="text-overflow m-0">Welcome !</h6>
|
||
</div>
|
||
|
||
<!-- item-->
|
||
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
||
<i class="fe-user"></i>
|
||
<span>Profile</span>
|
||
</a>
|
||
|
||
<!-- item-->
|
||
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
||
<i class="fe-settings"></i>
|
||
<span>Settings</span>
|
||
</a>
|
||
|
||
<!-- item-->
|
||
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
||
<i class="fe-lock"></i>
|
||
<span>Lock Screen</span>
|
||
</a>
|
||
|
||
<div class="dropdown-divider"></div>
|
||
|
||
<!-- item-->
|
||
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
||
<i class="fe-log-out"></i>
|
||
<span>Logout</span>
|
||
</a>
|
||
|
||
</div>
|
||
</li>
|
||
|
||
<li class="dropdown notification-list">
|
||
<a href="javascript:void(0);" class="nav-link right-bar-toggle waves-effect waves-light">
|
||
<i class="fe-settings noti-icon"></i>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
<!-- LOGO -->
|
||
<div class="logo-box">
|
||
<a href="index.html" class="logo text-center">
|
||
<span class="logo-lg">
|
||
<img src="assets/images/logo-light.png" alt="" height="25">
|
||
<!-- <span class="logo-lg-text-light">UBold</span> -->
|
||
</span>
|
||
<span class="logo-sm">
|
||
<!-- <span class="logo-sm-text-dark">U</span> -->
|
||
<img src="assets/images/logo-sm.png" alt="" height="28">
|
||
</span>
|
||
</a>
|
||
</div>
|
||
|
||
<ul class="list-unstyled topnav-menu topnav-menu-left m-0">
|
||
<li>
|
||
<button class="button-menu-mobile waves-effect waves-light">
|
||
<i class="fe-menu"></i>
|
||
</button>
|
||
</li>
|
||
|
||
<li class="d-none d-sm-block">
|
||
<form class="app-search">
|
||
<div class="app-search-box">
|
||
<div class="input-group">
|
||
<input type="text" class="form-control" placeholder="Search...">
|
||
<div class="input-group-append">
|
||
<button class="btn" type="submit">
|
||
<i class="fe-search"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
<!-- end Topbar -->
|
||
|
||
|
||
<!-- ========== Left Sidebar Start ========== -->
|
||
<div class="left-side-menu">
|
||
|
||
<div class="slimscroll-menu">
|
||
|
||
<!--- Sidemenu -->
|
||
<div id="sidebar-menu">
|
||
|
||
<ul class="metismenu" id="side-menu">
|
||
|
||
<li class="menu-title">Navigation</li>
|
||
|
||
<li>
|
||
<a href="javascript: void(0);">
|
||
<i class="fe-airplay"></i>
|
||
<span class="badge badge-success badge-pill float-right">2</span>
|
||
<span> Dashboard </span>
|
||
</a>
|
||
<ul class="nav-second-level" aria-expanded="false">
|
||
<li><a href="index.html">Dashboard 1</a></li>
|
||
<li> <a href="dashboard-2.html">Dashboard 2</a></li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="javascript: void(0);">
|
||
<i class="fe-sidebar"></i>
|
||
<span> Layouts </span>
|
||
<span class="menu-arrow"></span>
|
||
</a>
|
||
<ul class="nav-second-level" aria-expanded="false">
|
||
<li><a href="layouts-horizontal.html">Horizontal</a></li>
|
||
<li><a href="layouts-menucollapsed.html">Menu Collapsed</a></li>
|
||
<li><a href="layouts-light-sidebar.html">Light Sidebar</a></li>
|
||
<li><a href="layouts-small-sidebar.html">Small Sidebar</a></li>
|
||
<li><a href="layouts-boxed.html">Boxed</a></li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="javascript: void(0);">
|
||
<i class="fe-file-plus"></i>
|
||
<span> Pages </span>
|
||
<span class="menu-arrow"></span>
|
||
</a>
|
||
<ul class="nav-second-level" aria-expanded="false">
|
||
<li><a href="page-starter.html">Starter Page</a></li>
|
||
<li><a href="page-login.html">Login</a></li>
|
||
<li><a href="page-register.html">Register</a></li>
|
||
<li><a href="page-logout.html">Logout</a></li>
|
||
<li><a href="page-recoverpw.html">Recover Password</a></li>
|
||
<li><a href="page-lock-screen.html">Lock Screen</a></li>
|
||
<li><a href="page-confirm-mail.html">Confirm Mail</a></li>
|
||
<li><a href="page-404.html">Error 404</a></li>
|
||
<li><a href="page-404-alt.html">Error 404-alt</a></li>
|
||
<li><a href="page-500.html">Error 500</a></li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="javascript: void(0);">
|
||
<i class="fe-plus-square"></i>
|
||
<span> Extra Pages </span>
|
||
<span class="menu-arrow"></span>
|
||
</a>
|
||
<ul class="nav-second-level" aria-expanded="false">
|
||
<li><a href="extras-about.html">About Us</a></li>
|
||
<li><a href="extras-contact.html">Contact</a></li>
|
||
<li><a href="extras-companies.html">Companies</a></li>
|
||
<li><a href="extras-members.html">Members</a></li>
|
||
<li><a href="extras-members-2.html">Members 2</a></li>
|
||
<li><a href="extras-timeline.html">Timeline</a></li>
|
||
<li><a href="extras-invoice.html">Invoice</a></li>
|
||
<li><a href="extras-maintenance.html">Maintenance</a></li>
|
||
<li><a href="extras-coming-soon.html">Coming Soon</a></li>
|
||
<li><a href="extras-faq.html">FAQ</a></li>
|
||
<li><a href="extras-pricing.html">Pricing</a></li>
|
||
<li><a href="extras-profile.html">Profile</a></li>
|
||
<li><a href="extras-email-template.html">Email Templates</a></li>
|
||
<li><a href="extras-search-result.html">Search Results</a></li>
|
||
<li><a href="extras-sitemap.html">Site Map</a></li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li class="menu-title">Apps</li>
|
||
|
||
<li>
|
||
<a href="javascript: void(0);">
|
||
<i class="fe-mail"></i>
|
||
<span> Email </span>
|
||
<span class="menu-arrow"></span>
|
||
</a>
|
||
<ul class="nav-second-level" aria-expanded="false">
|
||
<li><a href="email-inbox.html">Inbox</a></li>
|
||
<li><a href="email-read.html">Read Email</a></li>
|
||
<li><a href="email-compose.html">Compose Email</a></li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="calendar.html">
|
||
<i class="fe-calendar"></i>
|
||
<span> Calendar </span>
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="tickets.html">
|
||
<i class="fe-life-buoy"></i>
|
||
<span> Tickets </span>
|
||
<span class="badge badge-danger badge-pill float-right">New</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="taskboard.html">
|
||
<i class="fe-file-text"></i>
|
||
<span> Task Board </span>
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="todo.html">
|
||
<i class="fe-layers"></i>
|
||
<span> Todo </span>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="menu-title">Components</li>
|
||
|
||
<li>
|
||
<a href="javascript: void(0);">
|
||
<i class="fe-target"></i>
|
||
<span> Admin UI </span>
|
||
<span class="menu-arrow"></span>
|
||
</a>
|
||
|
||
<ul class="nav-second-level" aria-expanded="false">
|
||
<li><a href="admin-grid.html">Grid</a></li>
|
||
<li><a href="admin-sweet-alert.html">Sweet Alert</a></li>
|
||
<li><a href="admin-tiles.html">Tiles Box</a></li>
|
||
<li><a href="admin-nestable.html">Nestable List</a></li>
|
||
<li><a href="admin-rangeslider.html">Range Slider</a></li>
|
||
<li><a href="admin-ratings.html">Ratings</a></li>
|
||
<li><a href="admin-filemanager.html">File Manager</a></li>
|
||
<li><a href="admin-lightbox.html">Lightbox</a></li>
|
||
<li><a href="admin-scrollbar.html">Scroll bar</a></li>
|
||
<li><a href="admin-slider.html">Slider</a></li>
|
||
<li><a href="admin-treeview.html">Treeview</a></li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="javascript: void(0);">
|
||
<i class="fe-briefcase"></i>
|
||
<span> UI Kit </span>
|
||
<span class="menu-arrow"></span>
|
||
</a>
|
||
|
||
<ul class="nav-second-level" aria-expanded="false">
|
||
<li><a href="ui-typography.html">Typography</a></li>
|
||
<li><a href="ui-cards.html">Cards</a></li>
|
||
<li><a href="ui-buttons.html">Buttons</a></li>
|
||
<li><a href="ui-modals.html">Modals</a></li>
|
||
<li><a href="ui-checkbox-radio.html">Checkboxs-Radios</a></li>
|
||
<li><a href="ui-spinners.html">Spinners</a></li>
|
||
<li><a href="ui-ribbons.html">Ribbons</a></li>
|
||
<li><a href="ui-portlets.html">Portlets</a></li>
|
||
<li><a href="ui-tabs.html">Tabs</a></li>
|
||
<li><a href="ui-progressbars.html">Progress Bars</a></li>
|
||
<li><a href="ui-notifications.html">Notification</a></li>
|
||
<li><a href="ui-carousel.html">Carousel</a></li>
|
||
<li><a href="ui-video.html">Video</a></li>
|
||
<li><a href="ui-tooltips-popovers.html">Tooltips & Popovers</a></li>
|
||
<li><a href="ui-images.html">Images</a></li>
|
||
<li><a href="ui-bootstrap.html">Bootstrap UI</a></li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="javascript: void(0);">
|
||
<i class="fe-box"></i>
|
||
<span> Icons </span>
|
||
<span class="menu-arrow"></span>
|
||
</a>
|
||
|
||
<ul class="nav-second-level" aria-expanded="false">
|
||
<li><a href="icons-colored.html">Colored Icons</a></li>
|
||
<li><a href="icons-materialdesign.html">Material Design</a></li>
|
||
<li><a href="icons-dripicons.html">Dripicons</a></li>
|
||
<li><a href="icons-fontawesome.html">Font awesome</a></li>
|
||
<li><a href="icons-feather.html">Feather Icons</a></li>
|
||
<li><a href="icons-simple-line.html">Simple line Icons</a></li>
|
||
<li><a href="icons-flags.html">Flag Icons</a></li>
|
||
<li><a href="icons-file.html">File Icons</a></li>
|
||
<li><a href="icons-pe7.html">PE7 Icons</a></li>
|
||
<li><a href="icons-typicons.html">Typicons</a></li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="javascript: void(0);">
|
||
<i class="fe-bar-chart-2"></i>
|
||
<span> Graphs </span>
|
||
<span class="menu-arrow"></span>
|
||
</a>
|
||
<ul class="nav-second-level" aria-expanded="false">
|
||
<li><a href="chart-flot.html">Flot Chart</a></li>
|
||
<li><a href="chart-morris.html">Morris Chart</a></li>
|
||
<li><a href="chart-google.html">Google Chart</a></li>
|
||
<li><a href="chart-echart.html">Echarts</a></li>
|
||
<li><a href="chart-chartist.html">Chartist Charts</a></li>
|
||
<li><a href="chart-chartjs.html">Chartjs Chart</a></li>
|
||
<li><a href="chart-c3.html">C3 Chart</a></li>
|
||
<li><a href="chart-sparkline.html">Sparkline Chart</a></li>
|
||
<li><a href="chart-knob.html">Jquery Knob</a></li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="javascript: void(0);">
|
||
<i class="fe-disc"></i>
|
||
<span class="badge badge-warning badge-pill float-right">12</span>
|
||
<span> Forms </span>
|
||
</a>
|
||
<ul class="nav-second-level" aria-expanded="false">
|
||
<li><a href="form-elements.html">Form Elements</a></li>
|
||
<li><a href="form-advanced.html">Form Advanced</a></li>
|
||
<li><a href="form-layouts.html">Form Layouts</a></li>
|
||
<li><a href="form-validation.html">Form Validation</a></li>
|
||
<li><a href="form-pickers.html">Form Pickers</a></li>
|
||
<li><a href="form-wizard.html">Form Wizard</a></li>
|
||
<li><a href="form-mask.html">Form Masks</a></li>
|
||
<li><a href="form-summernote.html">Summernote</a></li>
|
||
<li><a href="form-quilljs.html">Quilljs Editor</a></li>
|
||
<li><a href="form-typeahead.html">Typeahead</a></li>
|
||
<li><a href="form-x-editable.html">X Editable</a></li>
|
||
<li><a href="form-uploads.html">Multiple File Upload</a></li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="javascript: void(0);">
|
||
<i class="fe-layout"></i>
|
||
<span> Tables </span>
|
||
<span class="menu-arrow"></span>
|
||
</a>
|
||
<ul class="nav-second-level" aria-expanded="false">
|
||
<li><a href="tables-basic.html">Basic Tables</a></li>
|
||
<li><a href="tables-layouts.html">Tables Layouts</a></li>
|
||
<li><a href="tables-datatable.html">Data Tables</a></li>
|
||
<li><a href="tables-foo-tables.html">Foo Tables</a></li>
|
||
<li><a href="tables-responsive.html">Responsive Table</a></li>
|
||
<li><a href="tables-tablesaw.html">Tablesaw Tables</a></li>
|
||
<li><a href="tables-editable.html">Editable Tables</a></li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="javascript: void(0);">
|
||
<i class="fe-map"></i>
|
||
<span> Maps </span>
|
||
<span class="menu-arrow"></span>
|
||
</a>
|
||
<ul class="nav-second-level" aria-expanded="false">
|
||
<li><a href="maps-google.html">Google Maps</a></li>
|
||
<li><a href="maps-vector.html">Vector Maps</a></li>
|
||
<li><a href="maps-mapael.html">Mapael Maps</a></li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="javascript: void(0);">
|
||
<i class="fe-folder-plus"></i>
|
||
<span> Multi Level </span>
|
||
<span class="menu-arrow"></span>
|
||
</a>
|
||
<ul class="nav-second-level nav" aria-expanded="false">
|
||
<li>
|
||
<a href="javascript: void(0);">Level 1.1</a>
|
||
</li>
|
||
<li>
|
||
<a href="javascript: void(0);" aria-expanded="false">Level 1.2
|
||
<span class="menu-arrow"></span>
|
||
</a>
|
||
<ul class="nav-third-level nav" aria-expanded="false">
|
||
<li>
|
||
<a href="javascript: void(0);">Level 2.1</a>
|
||
</li>
|
||
<li>
|
||
<a href="javascript: void(0);">Level 2.2</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</div>
|
||
<!-- End Sidebar -->
|
||
|
||
<div class="clearfix"></div>
|
||
|
||
</div>
|
||
<!-- Sidebar -left -->
|
||
|
||
</div>
|
||
<!-- Left Sidebar End -->
|
||
|
||
<!-- ============================================================== -->
|
||
<!-- Start Page Content here -->
|
||
<!-- ============================================================== -->
|
||
|
||
<div class="content-page">
|
||
<div class="content">
|
||
|
||
<!-- Start Content-->
|
||
<div class="container-fluid">
|
||
|
||
<!-- start page title -->
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="page-title-box">
|
||
<div class="page-title-right">
|
||
<ol class="breadcrumb m-0">
|
||
<li class="breadcrumb-item"><a href="javascript: void(0);">Adminox</a></li>
|
||
<li class="breadcrumb-item"><a href="javascript: void(0);">UI Kit</a></li>
|
||
<li class="breadcrumb-item active">Modals</li>
|
||
</ol>
|
||
</div>
|
||
<h4 class="page-title">Modals</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end page title -->
|
||
|
||
<!-- Bootstrap Modals -->
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="card-box">
|
||
|
||
<h4 class="header-title">Bootstrap Modals (default)</h4>
|
||
|
||
<p class="sub-header">
|
||
A rendered modal with header, body, and set of actions in the footer.
|
||
</p>
|
||
|
||
<!-- sample modal content -->
|
||
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
|
||
<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">
|
||
<h5>Text in a modal</h5>
|
||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||
<hr>
|
||
<h5>Overflowing text to show scroll behavior</h5>
|
||
<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>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
|
||
<button type="button" class="btn btn-primary waves-effect waves-light">Save changes</button>
|
||
</div>
|
||
</div><!-- /.modal-content -->
|
||
</div><!-- /.modal-dialog -->
|
||
</div><!-- /.modal -->
|
||
|
||
<!-- Modal content for the above example -->
|
||
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" 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" id="myLargeModalLabel">Large modal</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
...
|
||
</div>
|
||
</div><!-- /.modal-content -->
|
||
</div><!-- /.modal-dialog -->
|
||
</div><!-- /.modal -->
|
||
|
||
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" 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" id="mySmallModalLabel">Small modal</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
...
|
||
</div>
|
||
</div><!-- /.modal-content -->
|
||
</div><!-- /.modal-dialog -->
|
||
</div><!-- /.modal -->
|
||
|
||
<div class="modal fade bs-example-modal-center" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h4 class="modal-title mt-0">Center modal</h4>
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<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 class="mb-0">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>
|
||
</div><!-- /.modal-content -->
|
||
</div><!-- /.modal-dialog -->
|
||
</div><!-- /.modal -->
|
||
|
||
<div class="button-list">
|
||
<!-- Button trigger modal -->
|
||
<button type="button" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#myModal">Standard Modal</button>
|
||
<!-- Large modal -->
|
||
<button type="button" class="btn btn-info waves-effect waves-light" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
|
||
<!-- Small modal -->
|
||
<button type="button" class="btn btn-purple waves-effect waves-light" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
|
||
<!-- Center modal -->
|
||
<button type="button" class="btn btn-success waves-effect waves-light" data-toggle="modal" data-target=".bs-example-modal-center">Center modal</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- Custom Modals -->
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="card-box">
|
||
|
||
<h4 class="header-title">Custom Modals</h4>
|
||
|
||
<p class="sub-header">
|
||
Examples of custom modals.
|
||
</p>
|
||
|
||
<!-- sample modal content -->
|
||
|
||
<div id="con-close-modal" class="modal fade" tabindex="-1" role="dialog" 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">Modal Content is Responsive</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="form-group">
|
||
<label for="field-1" class="control-label">Name</label>
|
||
<input type="text" class="form-control" id="field-1" placeholder="John">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="form-group">
|
||
<label for="field-2" class="control-label">Surname</label>
|
||
<input type="text" class="form-control" id="field-2" placeholder="Doe">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<div class="form-group">
|
||
<label for="field-3" class="control-label">Address</label>
|
||
<input type="text" class="form-control" id="field-3" placeholder="Address">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-4">
|
||
<div class="form-group">
|
||
<label for="field-4" class="control-label">City</label>
|
||
<input type="text" class="form-control" id="field-4" placeholder="Boston">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="form-group">
|
||
<label for="field-5" class="control-label">Country</label>
|
||
<input type="text" class="form-control" id="field-5" placeholder="United States">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="form-group">
|
||
<label for="field-6" class="control-label">Zip</label>
|
||
<input type="text" class="form-control" id="field-6" placeholder="123456">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<div class="form-group no-margin">
|
||
<label for="field-7" class="control-label">Personal Info</label>
|
||
<textarea class="form-control" id="field-7" placeholder="Write something about yourself"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
|
||
<button type="button" class="btn btn-info waves-effect waves-light">Save changes</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- /.modal -->
|
||
|
||
|
||
<div id="accordion-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content p-0">
|
||
<div id="accordion">
|
||
<div class="card mb-0">
|
||
<div class="card-header" id="headingOne">
|
||
<h5 class="m-0">
|
||
<a href="#collapseOne" class="text-dark" data-toggle="collapse"
|
||
aria-expanded="true"
|
||
aria-controls="collapseOne">
|
||
Collapsible Group Item #1
|
||
</a>
|
||
</h5>
|
||
</div>
|
||
|
||
<div id="collapseOne" class="collapse show"
|
||
aria-labelledby="headingOne" data-parent="#accordion">
|
||
<div class="card-body">
|
||
Anim pariatur cliche reprehenderit, enim eiusmod high life
|
||
accusamus terry richardson ad squid. 3 wolf moon officia
|
||
aute, non cupidatat skateboard dolor brunch. Food truck
|
||
quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
|
||
sunt aliqua put a bird on it squid single-origin coffee
|
||
nulla assumenda shoreditch et. Nihil anim keffiyeh
|
||
helvetica, craft beer labore wes anderson cred nesciunt
|
||
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
|
||
Leggings occaecat craft beer farm-to-table, raw denim
|
||
aesthetic synth nesciunt you probably haven't heard of them
|
||
accusamus labore sustainable VHS.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card mb-0">
|
||
<div class="card-header" id="headingTwo">
|
||
<h5 class="m-0">
|
||
<a href="#collapseTwo" class="text-dark collapsed" data-toggle="collapse"
|
||
aria-expanded="false"
|
||
aria-controls="collapseTwo">
|
||
Collapsible Group Item #2
|
||
</a>
|
||
</h5>
|
||
</div>
|
||
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
|
||
data-parent="#accordion">
|
||
<div class="card-body">
|
||
Anim pariatur cliche reprehenderit, enim eiusmod high life
|
||
accusamus terry richardson ad squid. 3 wolf moon officia
|
||
aute, non cupidatat skateboard dolor brunch. Food truck
|
||
quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
|
||
sunt aliqua put a bird on it squid single-origin coffee
|
||
nulla assumenda shoreditch et. Nihil anim keffiyeh
|
||
helvetica, craft beer labore wes anderson cred nesciunt
|
||
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
|
||
Leggings occaecat craft beer farm-to-table, raw denim
|
||
aesthetic synth nesciunt you probably haven't heard of them
|
||
accusamus labore sustainable VHS.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card mb-0">
|
||
<div class="card-header" id="headingThree">
|
||
<h5 class="m-0">
|
||
<a href="#collapseThree" class="text-dark collapsed" data-toggle="collapse"
|
||
aria-expanded="false"
|
||
aria-controls="collapseThree">
|
||
Collapsible Group Item #3
|
||
</a>
|
||
</h5>
|
||
</div>
|
||
<div id="collapseThree" class="collapse"
|
||
aria-labelledby="headingThree" data-parent="#accordion">
|
||
<div class="card-body">
|
||
Anim pariatur cliche reprehenderit, enim eiusmod high life
|
||
accusamus terry richardson ad squid. 3 wolf moon officia
|
||
aute, non cupidatat skateboard dolor brunch. Food truck
|
||
quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
|
||
sunt aliqua put a bird on it squid single-origin coffee
|
||
nulla assumenda shoreditch et. Nihil anim keffiyeh
|
||
helvetica, craft beer labore wes anderson cred nesciunt
|
||
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
|
||
Leggings occaecat craft beer farm-to-table, raw denim
|
||
aesthetic synth nesciunt you probably haven't heard of them
|
||
accusamus labore sustainable VHS.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /.modal-content -->
|
||
</div><!-- /.modal-dialog -->
|
||
</div><!-- /.modal -->
|
||
|
||
<div class="button-list">
|
||
<!-- Responsive modal -->
|
||
<button type="button" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#con-close-modal">Responsive Modal</button>
|
||
<!-- Accordion modal -->
|
||
<button type="button" class="btn btn-purple waves-effect waves-light" data-toggle="modal" data-target="#accordion-modal">Accordion in Modal</button>
|
||
</div>
|
||
</div>
|
||
</div><!-- end col -->
|
||
</div>
|
||
<!-- End row -->
|
||
|
||
|
||
|
||
<!-- Custom Modals -->
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="card-box">
|
||
|
||
<h4 class="header-title">Modal with Pages</h4>
|
||
|
||
<p class="sub-header">
|
||
Examples of custom modals.
|
||
</p>
|
||
|
||
<!-- Signup modal content -->
|
||
<div id="signup-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
|
||
<div class="modal-body p-3">
|
||
<div class="text-center mb-3">
|
||
<a href="index.html">
|
||
<img src="assets/images/logo-dark.png" alt="" height="30">
|
||
</a>
|
||
</div>
|
||
|
||
|
||
<form class="form-horizontal" action="#">
|
||
|
||
<div class="form-group row">
|
||
<div class="col-12">
|
||
<label for="username">Name</label>
|
||
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group row">
|
||
<div class="col-12">
|
||
<label for="emailaddress">Email address</label>
|
||
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john@deo.com">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group row">
|
||
<div class="col-12">
|
||
<label for="password">Password</label>
|
||
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group row">
|
||
<div class="col-12">
|
||
<div class="checkbox checkbox-primary">
|
||
<input id="checkbox11" type="checkbox" checked>
|
||
<label for="checkbox11">
|
||
I accept <a href="#">Terms and Conditions</a>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group row account-btn text-center mb-0">
|
||
<div class="col-12">
|
||
<button class="btn width-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign up Free</button>
|
||
</div>
|
||
</div>
|
||
|
||
</form>
|
||
|
||
</div>
|
||
</div><!-- /.modal-content -->
|
||
</div><!-- /.modal-dialog -->
|
||
</div><!-- /.modal -->
|
||
|
||
|
||
<!-- Signup modal content -->
|
||
<div id="login-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
|
||
<div class="modal-body p-3">
|
||
<div class="text-center mb-3">
|
||
<a href="index.html">
|
||
<img src="assets/images/logo-dark.png" alt="" height="30">
|
||
</a>
|
||
</div>
|
||
|
||
<form class="form-horizontal" action="#">
|
||
|
||
<div class="form-group row">
|
||
<div class="col-12">
|
||
<label for="emailaddress1">Email address</label>
|
||
<input class="form-control" type="email" id="emailaddress1" required="" placeholder="john@deo.com">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group row">
|
||
<div class="col-12">
|
||
<a href="page-recoverpw.html" class="text-muted float-right font-12">Forgot your password?</a>
|
||
<label for="password1">Password</label>
|
||
<input class="form-control" type="password" required="" id="password1" placeholder="Enter your password">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group row">
|
||
<div class="col-12">
|
||
<div class="checkbox checkbox-primary">
|
||
<input id="checkbox12" type="checkbox" checked>
|
||
<label for="checkbox12">
|
||
Remember me
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group account-btn row text-center mb-0">
|
||
<div class="col-12">
|
||
<button class="btn width-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign In</button>
|
||
</div>
|
||
</div>
|
||
|
||
</form>
|
||
|
||
</div>
|
||
</div><!-- /.modal-content -->
|
||
</div><!-- /.modal-dialog -->
|
||
</div><!-- /.modal -->
|
||
|
||
<div class="button-list">
|
||
<!-- Custom width modal -->
|
||
<button type="button" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#signup-modal">Sign Up Modal</button>
|
||
<!-- Full width modal -->
|
||
<button type="button" class="btn btn-info waves-effect waves-light" data-toggle="modal" data-target="#login-modal">Log in Modal</button>
|
||
</div>
|
||
</div>
|
||
</div><!-- end col -->
|
||
</div>
|
||
<!-- End row -->
|
||
|
||
|
||
|
||
<!-- Custom Modals -->
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="card-box">
|
||
|
||
<h4 class="header-title">Modals Examples (Animations)</h4>
|
||
|
||
<p class="sub-header">Use<code>data-animation="xxx" data-plugin="custommodal"
|
||
data-overlaySpeed="xxx" data-overlayColor="#xxx"</code>. </p>
|
||
|
||
<div class="button-list">
|
||
<a href="#custom-modal" class="btn btn-secondary waves-effect width-md" data-animation="fadein" data-plugin="custommodal"
|
||
data-overlaySpeed="200" data-overlayColor="#36404a">Fade in</a>
|
||
|
||
<a href="#custom-modal" class="btn btn-secondary waves-effect width-md" data-animation="slide" data-plugin="custommodal"
|
||
data-overlaySpeed="200" data-overlayColor="#36404a">Slide</a>
|
||
|
||
<a href="#custom-modal" class="btn btn-secondary waves-effect width-md" data-animation="newspaper" data-plugin="custommodal"
|
||
data-overlaySpeed="200" data-overlayColor="#36404a">Newspaper</a>
|
||
|
||
<a href="#custom-modal" class="btn btn-secondary waves-effect width-md" data-animation="fall" data-plugin="custommodal"
|
||
data-overlaySpeed="100" data-overlayColor="#36404a">Fall</a>
|
||
|
||
<a href="#custom-modal" class="btn btn-secondary waves-effect width-md" data-animation="sidefall" data-plugin="custommodal"
|
||
data-overlaySpeed="100" data-overlayColor="#36404a">Side Fall</a>
|
||
|
||
<a href="#custom-modal" class="btn btn-secondary waves-effect width-md" data-animation="blur" data-plugin="custommodal"
|
||
data-overlaySpeed="100" data-overlayColor="#36404a">Blur</a>
|
||
|
||
<a href="#custom-modal" class="btn btn-secondary waves-effect width-md" data-animation="flip" data-plugin="custommodal"
|
||
data-overlaySpeed="100" data-overlayColor="#36404a">Flip</a>
|
||
|
||
<a href="#custom-modal" class="btn btn-secondary waves-effect width-md" data-animation="sign" data-plugin="custommodal"
|
||
data-overlaySpeed="100" data-overlayColor="#36404a">Sign</a>
|
||
|
||
<a href="#custom-modal" class="btn btn-secondary waves-effect width-md" data-animation="superscaled" data-plugin="custommodal"
|
||
data-overlaySpeed="100" data-overlayColor="#36404a">Super Scaled</a>
|
||
|
||
<a href="#custom-modal" class="btn btn-secondary waves-effect width-md" data-animation="slit" data-plugin="custommodal"
|
||
data-overlaySpeed="100" data-overlayColor="#36404a">Slit</a>
|
||
|
||
<a href="#custom-modal" class="btn btn-secondary waves-effect width-md" data-animation="rotate" data-plugin="custommodal"
|
||
data-overlaySpeed="100" data-overlayColor="#36404a">Rotate</a>
|
||
|
||
<a href="#custom-modal" class="btn btn-secondary waves-effect width-md" data-animation="letmein" data-plugin="custommodal"
|
||
data-overlaySpeed="100" data-overlayColor="#36404a">Letmein</a>
|
||
|
||
<a href="#custom-modal" class="btn btn-secondary waves-effect width-md" data-animation="makeway" data-plugin="custommodal"
|
||
data-overlaySpeed="100" data-overlayColor="#36404a">Makeway</a>
|
||
|
||
<a href="#custom-modal" class="btn btn-secondary waves-effect width-md" data-animation="slip" data-plugin="custommodal"
|
||
data-overlaySpeed="100" data-overlayColor="#36404a">Slip</a>
|
||
|
||
<a href="#custom-modal" class="btn btn-secondary waves-effect width-md" data-animation="corner" data-plugin="custommodal"
|
||
data-overlaySpeed="100" data-overlayColor="#36404a">Corner</a>
|
||
|
||
<a href="#custom-modal" class="btn btn-secondary waves-effect width-md" data-animation="slidetogether" data-plugin="custommodal"
|
||
data-overlaySpeed="100" data-overlayColor="#36404a">Slide together</a>
|
||
|
||
<a href="#custom-modal" class="btn btn-secondary waves-effect width-md" data-animation="scale" data-plugin="custommodal"
|
||
data-overlaySpeed="100" data-overlayColor="#36404a">Scale</a>
|
||
|
||
<a href="#custom-modal" class="btn btn-secondary waves-effect width-md" data-animation="door" data-plugin="custommodal"
|
||
data-overlaySpeed="100" data-overlayColor="#36404a">Door</a>
|
||
|
||
<a href="#custom-modal" class="btn btn-secondary waves-effect width-md" data-animation="push" data-plugin="custommodal"
|
||
data-overlaySpeed="100" data-overlayColor="#36404a">Push</a>
|
||
|
||
<a href="#custom-modal" class="btn btn-secondary waves-effect width-md" data-animation="contentscale" data-plugin="custommodal"
|
||
data-overlaySpeed="100" data-overlayColor="#36404a">Content Scale</a>
|
||
|
||
<a href="#custom-modal" class="btn btn-secondary waves-effect width-md" data-animation="swell" data-plugin="custommodal"
|
||
data-overlaySpeed="100" data-overlayColor="#36404a">Swell</a>
|
||
|
||
<a href="#custom-modal" class="btn btn-secondary waves-effect width-md" data-animation="rotatedown" data-plugin="custommodal"
|
||
data-overlaySpeed="100" data-overlayColor="#36404a">Rotate Down</a>
|
||
|
||
<a href="#custom-modal" class="btn btn-secondary waves-effect width-md" data-animation="flash" data-plugin="custommodal"
|
||
data-overlaySpeed="100" data-overlayColor="#36404a">Flash</a>
|
||
</div>
|
||
</div>
|
||
</div><!-- end col -->
|
||
</div>
|
||
<!-- End row -->
|
||
|
||
</div> <!-- end container-fluid -->
|
||
|
||
</div> <!-- end content -->
|
||
|
||
|
||
|
||
<!-- Footer Start -->
|
||
<footer class="footer">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
2017 - 2019 © Adminox theme by <a href="">Coderthemes</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
<!-- end Footer -->
|
||
|
||
</div>
|
||
|
||
<!-- ============================================================== -->
|
||
<!-- End Page content -->
|
||
<!-- ============================================================== -->
|
||
|
||
</div>
|
||
<!-- END wrapper -->
|
||
|
||
<!-- Right Sidebar -->
|
||
<div class="right-bar">
|
||
<div class="rightbar-title">
|
||
<a href="javascript:void(0);" class="right-bar-toggle float-right">
|
||
<i class="mdi mdi-close"></i>
|
||
</a>
|
||
<h4 class="font-16 m-0 text-white">Theme Customizer</h4>
|
||
</div>
|
||
<div class="slimscroll-menu">
|
||
|
||
<div class="p-3">
|
||
<div class="alert alert-warning" role="alert">
|
||
<strong>Customize </strong> the overall color scheme, layout, etc.
|
||
</div>
|
||
<div class="mb-2">
|
||
<img src="assets/images/layouts/light.png" class="img-fluid img-thumbnail" alt="">
|
||
</div>
|
||
<div class="custom-control custom-switch mb-3">
|
||
<input type="checkbox" class="custom-control-input theme-choice" id="light-mode-switch" checked />
|
||
<label class="custom-control-label" for="light-mode-switch">Light Mode</label>
|
||
</div>
|
||
|
||
<div class="mb-2">
|
||
<img src="assets/images/layouts/dark.png" class="img-fluid img-thumbnail" alt="">
|
||
</div>
|
||
<div class="custom-control custom-switch mb-3">
|
||
<input type="checkbox" class="custom-control-input theme-choice" id="dark-mode-switch" data-bsStyle="assets/css/bootstrap-dark.min.css"
|
||
data-appStyle="assets/css/app-dark.min.css" />
|
||
<label class="custom-control-label" for="dark-mode-switch">Dark Mode</label>
|
||
</div>
|
||
|
||
<div class="mb-2">
|
||
<img src="assets/images/layouts/rtl.png" class="img-fluid img-thumbnail" alt="">
|
||
</div>
|
||
<div class="custom-control custom-switch mb-3">
|
||
<input type="checkbox" class="custom-control-input theme-choice" id="rtl-mode-switch" data-appStyle="assets/css/app-rtl.min.css" />
|
||
<label class="custom-control-label" for="rtl-mode-switch">RTL Mode</label>
|
||
</div>
|
||
|
||
<div class="mb-2">
|
||
<img src="assets/images/layouts/dark-rtl.png" class="img-fluid img-thumbnail" alt="">
|
||
</div>
|
||
<div class="custom-control custom-switch mb-5">
|
||
<input type="checkbox" class="custom-control-input theme-choice" id="dark-rtl-mode-switch" data-bsStyle="assets/css/bootstrap-dark.min.css"
|
||
data-appStyle="assets/css/app-dark-rtl.min.css" />
|
||
<label class="custom-control-label" for="dark-rtl-mode-switch">Dark RTL Mode</label>
|
||
</div>
|
||
|
||
<a href="https://1.envato.market/y2YAD" class="btn btn-danger btn-block mt-3" target="_blank"><i class="mdi mdi-download mr-1"></i> Download Now</a>
|
||
</div>
|
||
</div> <!-- end slimscroll-menu-->
|
||
</div>
|
||
<!-- /Right-bar -->
|
||
|
||
<!-- Right bar overlay-->
|
||
<div class="rightbar-overlay"></div>
|
||
|
||
<a href="javascript:void(0);" class="right-bar-toggle demos-show-btn">
|
||
<i class="mdi mdi-settings-outline mdi-spin"></i> Choose Demos
|
||
</a>
|
||
|
||
<!-- Modal -->
|
||
<div id="custom-modal" class="modal-demo">
|
||
<button type="button" class="close" onclick="Custombox.modal.close();">
|
||
<span>×</span><span class="sr-only">Close</span>
|
||
</button>
|
||
<h4 class="custom-modal-title">Modal title</h4>
|
||
<div class="custom-modal-text">
|
||
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Vendor js -->
|
||
<script src="assets/js/vendor.min.js"></script>
|
||
|
||
<script src="assets/libs/custombox/custombox.min.js"></script>
|
||
|
||
<!-- App js -->
|
||
<script src="assets/js/app.min.js"></script>
|
||
|
||
</body>
|
||
</html> |