1511 lines
123 KiB
HTML
Executable File
1511 lines
123 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html class="loading" lang="en" data-textdirection="ltr">
|
|
<!-- BEGIN: Head-->
|
|
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
|
|
<meta name="description" content="Vuesax admin is super flexible, powerful, clean & modern responsive bootstrap 4 admin template with unlimited possibilities.">
|
|
<meta name="keywords" content="admin template, Vuesax admin template, dashboard template, flat admin template, responsive admin template, web app">
|
|
<meta name="author" content="PIXINVENT">
|
|
<title>Modal - Vuesax - Bootstrap HTML admin template</title>
|
|
<link rel="apple-touch-icon" href="../../../app-assets/images/ico/apple-icon-120.png">
|
|
<link rel="shortcut icon" type="image/x-icon" href="../../../app-assets/images/ico/favicon.ico">
|
|
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600" rel="stylesheet">
|
|
|
|
<!-- BEGIN: Vendor CSS-->
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/css/vendors.min.css">
|
|
<!-- END: Vendor CSS-->
|
|
|
|
<!-- BEGIN: Theme CSS-->
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/css/bootstrap.css">
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/css/bootstrap-extended.css">
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/css/colors.css">
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/css/components.css">
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/css/themes/dark-layout.css">
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/css/themes/semi-dark-layout.css">
|
|
|
|
<!-- BEGIN: Page CSS-->
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/css/core/menu/menu-types/vertical-menu.css">
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/css/core/colors/palette-gradient.css">
|
|
<!-- END: Page CSS-->
|
|
|
|
<!-- BEGIN: Custom CSS-->
|
|
<link rel="stylesheet" type="text/css" href="../../../assets/css/style.css">
|
|
<!-- END: Custom CSS-->
|
|
|
|
</head>
|
|
<!-- END: Head-->
|
|
|
|
<!-- BEGIN: Body-->
|
|
|
|
<body class="vertical-layout vertical-menu-modern semi-dark-layout 2-columns navbar-floating footer-static " data-open="click" data-menu="vertical-menu-modern" data-col="2-columns" data-layout="semi-dark-layout">
|
|
|
|
<!-- BEGIN: Main Menu-->
|
|
<div class="main-menu menu-fixed menu-dark menu-accordion menu-shadow" data-scroll-to-active="true">
|
|
<div class="navbar-header">
|
|
<ul class="nav navbar-nav flex-row">
|
|
<li class="nav-item mr-auto"><a class="navbar-brand" href="../../../html/ltr/vertical-menu-template-semi-dark/index.html">
|
|
<div class="brand-logo"></div>
|
|
<h2 class="brand-text mb-0">Vuesax</h2>
|
|
</a></li>
|
|
<li class="nav-item nav-toggle"><a class="nav-link modern-nav-toggle pr-0" data-toggle="collapse"><i class="feather icon-x d-block d-xl-none font-medium-4 primary toggle-icon"></i><i class="toggle-icon feather icon-disc font-medium-4 d-none d-xl-block collapse-toggle-icon primary" data-ticon="icon-disc"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="shadow-bottom"></div>
|
|
<div class="main-menu-content">
|
|
<ul class="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation">
|
|
<li class=" nav-item"><a href="index.html"><i class="feather icon-home"></i><span class="menu-title" data-i18n="Dashboard">Dashboard</span><span class="badge badge badge-warning badge-pill float-right mr-2">2</span></a>
|
|
<ul class="menu-content">
|
|
<li><a href="dashboard-analytics.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Analytics">Analytics</span></a>
|
|
</li>
|
|
<li><a href="dashboard-ecommerce.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="eCommerce">eCommerce</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class=" navigation-header"><span>Apps</span>
|
|
</li>
|
|
<li class=" nav-item"><a href="app-email.html"><i class="feather icon-mail"></i><span class="menu-title" data-i18n="Email">Email</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="app-chat.html"><i class="feather icon-message-square"></i><span class="menu-title" data-i18n="Chat">Chat</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="app-todo.html"><i class="feather icon-check-square"></i><span class="menu-title" data-i18n="Todo">Todo</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="app-calender.html"><i class="feather icon-calendar"></i><span class="menu-title" data-i18n="Calender">Calender</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="app-user.html"><i class="feather icon-bar-chart"></i><span class="menu-title" data-i18n="User dataTables">User dataTables</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="#"><i class="feather icon-shopping-cart"></i><span class="menu-title" data-i18n="Ecommerce">Ecommerce</span></a>
|
|
<ul class="menu-content">
|
|
<li><a href="app-ecommerce-shop.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Shop">Shop</span></a>
|
|
</li>
|
|
<li><a href="app-ecommerce-wishlist.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Wish List">Wish List</span></a>
|
|
</li>
|
|
<li><a href="app-ecommerce-checkout.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Checkout">Checkout</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class=" navigation-header"><span>UI Elements</span>
|
|
</li>
|
|
<li class=" nav-item"><a href="#"><i class="feather icon-list"></i><span class="menu-title" data-i18n="Data List">Data List</span><span class="badge badge badge-primary badge-pill float-right mr-2">New</span></a>
|
|
<ul class="menu-content">
|
|
<li><a href="data-list-view.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="List View">List View</span></a>
|
|
</li>
|
|
<li><a href="data-thumb-view.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Thumb View">Thumb View</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class=" nav-item"><a href="#"><i class="feather icon-layout"></i><span class="menu-title" data-i18n="Content">Content</span></a>
|
|
<ul class="menu-content">
|
|
<li><a href="content-grid.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Grid">Grid</span></a>
|
|
</li>
|
|
<li><a href="content-typography.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Typography">Typography</span></a>
|
|
</li>
|
|
<li><a href="content-text-utilities.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Text Utilities">Text Utilities</span></a>
|
|
</li>
|
|
<li><a href="content-syntax-highlighter.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Syntax Highlighter">Syntax Highlighter</span></a>
|
|
</li>
|
|
<li><a href="content-helper-classes.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Helper Classes">Helper Classes</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class=" nav-item"><a href="colors.html"><i class="feather icon-droplet"></i><span class="menu-title" data-i18n="Colors">Colors</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="#"><i class="feather icon-eye"></i><span class="menu-title" data-i18n="Icons">Icons</span></a>
|
|
<ul class="menu-content">
|
|
<li><a href="icons-feather.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Feather">Feather</span></a>
|
|
</li>
|
|
<li><a href="icons-font-awesome.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Font Awesome">Font Awesome</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class=" nav-item"><a href="#"><i class="feather icon-credit-card"></i><span class="menu-title" data-i18n="Card">Card</span></a>
|
|
<ul class="menu-content">
|
|
<li><a href="card-basic.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Basic">Basic</span></a>
|
|
</li>
|
|
<li><a href="card-advance.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Advance">Advance</span></a>
|
|
</li>
|
|
<li><a href="card-statistics.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Statistics">Statistics</span></a>
|
|
</li>
|
|
<li><a href="card-analytics.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Analytics">Analytics</span></a>
|
|
</li>
|
|
<li><a href="card-actions.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Card Actions">Card Actions</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class=" nav-item"><a href="#"><i class="feather icon-briefcase"></i><span class="menu-title" data-i18n="Components">Components</span></a>
|
|
<ul class="menu-content">
|
|
<li><a href="component-alerts.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Alerts">Alerts</span></a>
|
|
</li>
|
|
<li><a href="component-buttons-basic.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Buttons">Buttons</span></a>
|
|
</li>
|
|
<li><a href="component-breadcrumbs.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Breadcrumbs">Breadcrumbs</span></a>
|
|
</li>
|
|
<li><a href="component-carousel.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Carousel">Carousel</span></a>
|
|
</li>
|
|
<li><a href="component-collapse.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Collapse">Collapse</span></a>
|
|
</li>
|
|
<li><a href="component-dropdowns.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Dropdowns">Dropdowns</span></a>
|
|
</li>
|
|
<li><a href="component-list-group.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="List Group">List Group</span></a>
|
|
</li>
|
|
<li class="active"><a href="component-modals.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Modals">Modals</span></a>
|
|
</li>
|
|
<li><a href="component-pagination.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Pagination">Pagination</span></a>
|
|
</li>
|
|
<li><a href="component-navs-component.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Navs Component">Navs Component</span></a>
|
|
</li>
|
|
<li><a href="component-navbar.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Navbar">Navbar</span></a>
|
|
</li>
|
|
<li><a href="component-tabs-component.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Tabs Component">Tabs Component</span></a>
|
|
</li>
|
|
<li><a href="component-pills-component.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Pills Component">Pills Component</span></a>
|
|
</li>
|
|
<li><a href="component-tooltips.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Tooltips">Tooltips</span></a>
|
|
</li>
|
|
<li><a href="component-popovers.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Popovers">Popovers</span></a>
|
|
</li>
|
|
<li><a href="component-badges.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Badges">Badges</span></a>
|
|
</li>
|
|
<li><a href="component-pill-badges.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Pill Badges">Pill Badges</span></a>
|
|
</li>
|
|
<li><a href="component-progress.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Progress">Progress</span></a>
|
|
</li>
|
|
<li><a href="component-media-objects.html"><i class="feather icon-circle"></i><span class="menu-item">Media Objects</span></a>
|
|
</li>
|
|
<li><a href="component-spinner.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Spinner">Spinner</span></a>
|
|
</li>
|
|
<li><a href="component-bs-toast.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Toasts">Toasts</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class=" nav-item"><a href="#"><i class="feather icon-box"></i><span class="menu-title" data-i18n="Extra Components">Extra Components</span></a>
|
|
<ul class="menu-content">
|
|
<li><a href="ex-component-avatar.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Avatar">Avatar</span></a>
|
|
</li>
|
|
<li><a href="ex-component-chips.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Chips">Chips</span></a>
|
|
</li>
|
|
<li><a href="ex-component-divider.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Divider">Divider</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class=" navigation-header"><span>Forms & Tables</span>
|
|
</li>
|
|
<li class=" nav-item"><a href="#"><i class="feather icon-copy"></i><span class="menu-title" data-i18n="Form Elements">Form Elements</span></a>
|
|
<ul class="menu-content">
|
|
<li><a href="form-select.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Select">Select</span></a>
|
|
</li>
|
|
<li><a href="form-switch.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Switch">Switch</span></a>
|
|
</li>
|
|
<li><a href="form-checkbox.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Checkbox">Checkbox</span></a>
|
|
</li>
|
|
<li><a href="form-radio.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Radio">Radio</span></a>
|
|
</li>
|
|
<li><a href="form-inputs.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Input">Input</span></a>
|
|
</li>
|
|
<li><a href="form-input-groups.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Input Groups">Input Groups</span></a>
|
|
</li>
|
|
<li><a href="form-number-input.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Number Input">Number Input</span></a>
|
|
</li>
|
|
<li><a href="form-textarea.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Textarea">Textarea</span></a>
|
|
</li>
|
|
<li><a href="form-date-time-picker.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Date & Time Picker">Date & Time Picker</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class=" nav-item"><a href="form-layout.html"><i class="feather icon-box"></i><span class="menu-title" data-i18n="Form Layout">Form Layout</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="form-wizard.html"><i class="feather icon-package"></i><span class="menu-title" data-i18n="Form Wizard">Form Wizard</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="form-validation.html"><i class="feather icon-check-circle"></i><span class="menu-title" data-i18n="Form Validation">Form Validation</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="table.html"><i class="feather icon-server"></i><span class="menu-title" data-i18n="Table">Table</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="table-datatable.html"><i class="feather icon-grid"></i><span class="menu-title" data-i18n="Datatable">Datatable</span></a>
|
|
</li>
|
|
<li class=" navigation-header"><span>pages</span>
|
|
</li>
|
|
<li class=" nav-item"><a href="page-user-profile.html"><i class="feather icon-user"></i><span class="menu-title" data-i18n="Profile">Profile</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="page-faq.html"><i class="feather icon-help-circle"></i><span class="menu-title" data-i18n="FAQ">FAQ</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="page-knowledge-base.html"><i class="feather icon-info"></i><span class="menu-title" data-i18n="Knowledge Base">Knowledge Base</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="page-search.html"><i class="feather icon-search"></i><span class="menu-title" data-i18n="Search">Search</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="page-invoice.html"><i class="feather icon-file"></i><span class="menu-title" data-i18n="Invoice">Invoice</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="page-user-settings.html"><i class="feather icon-settings"></i><span class="menu-title" data-i18n="User Settings">User Settings</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="#"><i class="feather icon-zap"></i><span class="menu-title" data-i18n="Starter kit">Starter kit</span></a>
|
|
<ul class="menu-content">
|
|
<li><a href="../../../starter-kit/ltr/vertical-menu-template-semi-dark/sk-layout-1-column.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="1 column">1 column</span></a>
|
|
</li>
|
|
<li><a href="../../../starter-kit/ltr/vertical-menu-template-semi-dark/sk-layout-2-columns.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="2 columns">2 columns</span></a>
|
|
</li>
|
|
<li><a href="../../../starter-kit/ltr/vertical-menu-template-semi-dark/sk-layout-fixed-navbar.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Fixed navbar">Fixed navbar</span></a>
|
|
</li>
|
|
<li><a href="../../../starter-kit/ltr/vertical-menu-template-semi-dark/sk-layout-floating-navbar.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Floating navbar">Floating navbar</span></a>
|
|
</li>
|
|
<li><a href="../../../starter-kit/ltr/vertical-menu-template-semi-dark/sk-layout-fixed.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Fixed layout">Fixed layout</span></a>
|
|
</li>
|
|
<li><a href="../../../starter-kit/ltr/vertical-menu-template-semi-dark/sk-layout-static.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Static layout">Static layout</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class=" nav-item"><a href="#"><i class="feather icon-unlock"></i><span class="menu-title" data-i18n="Authentication">Authentication</span></a>
|
|
<ul class="menu-content">
|
|
<li><a href="auth-login.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Login">Login</span></a>
|
|
</li>
|
|
<li><a href="auth-register.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Register">Register</span></a>
|
|
</li>
|
|
<li><a href="auth-forgot-password.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Forgot Password">Forgot Password</span></a>
|
|
</li>
|
|
<li><a href="auth-reset-password.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Reset Password">Reset Password</span></a>
|
|
</li>
|
|
<li><a href="auth-lock-screen.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Lock Screen">Lock Screen</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class=" nav-item"><a href="#"><i class="feather icon-file-text"></i><span class="menu-title" data-i18n="Miscellaneous">Miscellaneous</span></a>
|
|
<ul class="menu-content">
|
|
<li><a href="page-coming-soon.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Coming Soon">Coming Soon</span></a>
|
|
</li>
|
|
<li><a href="#"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Error">Error</span></a>
|
|
<ul class="menu-content">
|
|
<li><a href="error-404.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="404">404</span></a>
|
|
</li>
|
|
<li><a href="error-500.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="500">500</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="page-not-authorized.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Not Authorized">Not Authorized</span></a>
|
|
</li>
|
|
<li><a href="page-maintenance.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Maintenance">Maintenance</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class=" navigation-header"><span>Charts & Maps</span>
|
|
</li>
|
|
<li class=" nav-item"><a href="#"><i class="feather icon-pie-chart"></i><span class="menu-title" data-i18n="Charts">Charts</span><span class="badge badge badge-pill badge-success float-right mr-2">3</span></a>
|
|
<ul class="menu-content">
|
|
<li><a href="chart-apex.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Apex">Apex</span></a>
|
|
</li>
|
|
<li><a href="chart-chartjs.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Chartjs">Chartjs</span></a>
|
|
</li>
|
|
<li><a href="chart-echarts.html"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Echarts">Echarts</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class=" nav-item"><a href="maps-google.html"><i class="feather icon-map"></i><span class="menu-title" data-i18n="Google Maps">Google Maps</span></a>
|
|
</li>
|
|
<li class=" navigation-header"><span>Extensions</span>
|
|
</li>
|
|
<li class=" nav-item"><a href="ext-component-sweet-alerts.html"><i class="feather icon-alert-circle"></i><span class="menu-title" data-i18n="Sweet Alert">Sweet Alert</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="ext-component-toastr.html"><i class="feather icon-zap"></i><span class="menu-title" data-i18n="Toastr">Toastr</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="ext-component-noui-slider.html"><i class="feather icon-sliders"></i><span class="menu-title" data-i18n="NoUi Slider">NoUi Slider</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="ext-component-file-uploader.html"><i class="feather icon-upload-cloud"></i><span class="menu-title" data-i18n="File Uploader">File Uploader</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="ext-component-quill-editor.html"><i class="feather icon-edit"></i><span class="menu-title" data-i18n="Quill Editor">Quill Editor</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="ext-component-drag-drop.html"><i class="feather icon-droplet"></i><span class="menu-title" data-i18n="Drag & Drop">Drag & Drop</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="ext-component-tour.html"><i class="feather icon-info"></i><span class="menu-title" data-i18n="Tour">Tour</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="ext-component-clipboard.html"><i class="feather icon-copy"></i><span class="menu-title" data-i18n="Clipboard">Clipboard</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href=" ext-component-plyr.html"><i class="feather icon-film"></i><span class="menu-title" data-i18n="Media player">Media player</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="ext-component-context-menu.html"><i class="feather icon-more-horizontal"></i><span class="menu-title" data-i18n="Context Menu">Context Menu</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="ext-component-i18n.html"><i class="feather icon-globe"></i><span class="menu-title" data-i18n="l18n">l18n</span></a>
|
|
</li>
|
|
<li class=" navigation-header"><span>Others</span>
|
|
</li>
|
|
<li class=" nav-item"><a href="#"><i class="feather icon-menu"></i><span class="menu-title" data-i18n="Menu Levels">Menu Levels</span></a>
|
|
<ul class="menu-content">
|
|
<li><a href="#"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Second Level">Second Level</span></a>
|
|
</li>
|
|
<li><a href="#"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Second Level">Second Level</span></a>
|
|
<ul class="menu-content">
|
|
<li><a href="#"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Third Level">Third Level</span></a>
|
|
</li>
|
|
<li><a href="#"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Third Level">Third Level</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="disabled nav-item"><a href="#"><i class="feather icon-eye-off"></i><span class="menu-title" data-i18n="Disabled Menu">Disabled Menu</span></a>
|
|
</li>
|
|
<li class=" navigation-header"><span>Support</span>
|
|
</li>
|
|
<li class=" nav-item"><a href="changelog.html"><i class="feather icon-file"></i><span class="menu-title" data-i18n="">Changelog</span><span class="badge badge badge-pill badge-danger float-right">1.1</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="https://pixinvent.com/demo/vuesax-html-admin-dashboard-template/documentation"><i class="feather icon-folder"></i><span class="menu-title" data-i18n="Documentation">Documentation</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="https://pixinvent.ticksy.com/"><i class="feather icon-life-buoy"></i><span class="menu-title" data-i18n="Raise Support">Raise Support</span></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- END: Main Menu-->
|
|
|
|
<!-- BEGIN: Content-->
|
|
<div class="app-content content">
|
|
|
|
<!-- BEGIN: Header-->
|
|
<div class="content-overlay"></div>
|
|
<div class="header-navbar-shadow"></div>
|
|
<nav class="header-navbar navbar-expand-lg navbar navbar-with-menu floating-nav navbar-light navbar-shadow">
|
|
<div class="navbar-wrapper">
|
|
<div class="navbar-container content">
|
|
<div class="navbar-collapse" id="navbar-mobile">
|
|
<div class="mr-auto float-left bookmark-wrapper d-flex align-items-center">
|
|
<ul class="nav navbar-nav">
|
|
<li class="nav-item mobile-menu d-xl-none mr-auto"><a class="nav-link nav-menu-main menu-toggle hidden-xs" href="#"><i class="ficon feather icon-menu"></i></a></li>
|
|
</ul>
|
|
<ul class="nav navbar-nav bookmark-icons">
|
|
<!-- li.nav-item.mobile-menu.d-xl-none.mr-auto-->
|
|
<!-- a.nav-link.nav-menu-main.menu-toggle.hidden-xs(href='#')-->
|
|
<!-- i.ficon.feather.icon-menu-->
|
|
<li class="nav-item d-none d-lg-block"><a class="nav-link" href="app-todo.html" data-toggle="tooltip" data-placement="top" title="Todo"><i class="ficon feather icon-check-square"></i></a></li>
|
|
<li class="nav-item d-none d-lg-block"><a class="nav-link" href="app-chat.html" data-toggle="tooltip" data-placement="top" title="Chat"><i class="ficon feather icon-message-square"></i></a></li>
|
|
<li class="nav-item d-none d-lg-block"><a class="nav-link" href="app-email.html" data-toggle="tooltip" data-placement="top" title="Email"><i class="ficon feather icon-mail"></i></a></li>
|
|
<li class="nav-item d-none d-lg-block"><a class="nav-link" href="app-calender.html" data-toggle="tooltip" data-placement="top" title="Calendar"><i class="ficon feather icon-calendar"></i></a></li>
|
|
</ul>
|
|
<ul class="nav navbar-nav">
|
|
<li class="nav-item d-none d-lg-block"><a class="nav-link bookmark-star"><i class="ficon feather icon-star warning"></i></a>
|
|
<div class="bookmark-input search-input">
|
|
<div class="bookmark-input-icon"><i class="feather icon-search primary"></i></div>
|
|
<input class="form-control input" type="text" placeholder="Explore Vuesax..." tabindex="0" data-search="template-list" />
|
|
<ul class="search-list"></ul>
|
|
</div>
|
|
<!-- select.bookmark-select-->
|
|
<!-- option Chat-->
|
|
<!-- option email-->
|
|
<!-- option todo-->
|
|
<!-- option Calendar-->
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<ul class="nav navbar-nav float-right">
|
|
<li class="dropdown dropdown-language nav-item"><a class="dropdown-toggle nav-link" id="dropdown-flag" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="flag-icon flag-icon-us"></i><span class="selected-language">English</span></a>
|
|
<div class="dropdown-menu" aria-labelledby="dropdown-flag"><a class="dropdown-item" href="#" data-language="en"><i class="flag-icon flag-icon-us"></i> English</a><a class="dropdown-item" href="#" data-language="fr"><i class="flag-icon flag-icon-fr"></i> French</a><a class="dropdown-item" href="#" data-language="de"><i class="flag-icon flag-icon-de"></i> German</a><a class="dropdown-item" href="#" data-language="pt"><i class="flag-icon flag-icon-pt"></i> Portuguese</a></div>
|
|
</li>
|
|
<li class="nav-item d-none d-lg-block"><a class="nav-link nav-link-expand"><i class="ficon feather icon-maximize"></i></a></li>
|
|
<li class="nav-item nav-search"><a class="nav-link nav-link-search"><i class="ficon feather icon-search"></i></a>
|
|
<div class="search-input">
|
|
<div class="search-input-icon"><i class="feather icon-search primary"></i></div>
|
|
<input class="input" type="text" placeholder="Explore Vuesax..." tabindex="-1" data-search="template-list" />
|
|
<div class="search-input-close"><i class="feather icon-x"></i></div>
|
|
<ul class="search-list"></ul>
|
|
</div>
|
|
</li>
|
|
<li class="dropdown dropdown-notification nav-item"><a class="nav-link nav-link-label" href="#" data-toggle="dropdown"><i class="ficon feather icon-bell"></i><span class="badge badge-pill badge-primary badge-up">5</span></a>
|
|
<ul class="dropdown-menu dropdown-menu-media dropdown-menu-right">
|
|
<li class="dropdown-menu-header">
|
|
<div class="dropdown-header m-0 p-2">
|
|
<h3 class="white">5 New</h3><span class="notification-title">App Notifications</span>
|
|
</div>
|
|
</li>
|
|
<li class="scrollable-container media-list"><a class="d-flex justify-content-between" href="javascript:void(0)">
|
|
<div class="media d-flex align-items-start">
|
|
<div class="media-left"><i class="feather icon-plus-square font-medium-5 primary"></i></div>
|
|
<div class="media-body">
|
|
<h6 class="primary media-heading">You have new order!</h6><small class="notification-text"> Are your going to meet me tonight?</small>
|
|
</div><small>
|
|
<time class="media-meta" datetime="2015-06-11T18:29:20+08:00">9 hours ago</time></small>
|
|
</div>
|
|
</a><a class="d-flex justify-content-between" href="javascript:void(0)">
|
|
<div class="media d-flex align-items-start">
|
|
<div class="media-left"><i class="feather icon-download-cloud font-medium-5 success"></i></div>
|
|
<div class="media-body">
|
|
<h6 class="success media-heading red darken-1">99% Server load</h6><small class="notification-text">You got new order of goods.</small>
|
|
</div><small>
|
|
<time class="media-meta" datetime="2015-06-11T18:29:20+08:00">5 hour ago</time></small>
|
|
</div>
|
|
</a><a class="d-flex justify-content-between" href="javascript:void(0)">
|
|
<div class="media d-flex align-items-start">
|
|
<div class="media-left"><i class="feather icon-alert-triangle font-medium-5 danger"></i></div>
|
|
<div class="media-body">
|
|
<h6 class="danger media-heading yellow darken-3">Warning notifixation</h6><small class="notification-text">Server have 99% CPU usage.</small>
|
|
</div><small>
|
|
<time class="media-meta" datetime="2015-06-11T18:29:20+08:00">Today</time></small>
|
|
</div>
|
|
</a><a class="d-flex justify-content-between" href="javascript:void(0)">
|
|
<div class="media d-flex align-items-start">
|
|
<div class="media-left"><i class="feather icon-check-circle font-medium-5 info"></i></div>
|
|
<div class="media-body">
|
|
<h6 class="info media-heading">Complete the task</h6><small class="notification-text">Cake sesame snaps cupcake</small>
|
|
</div><small>
|
|
<time class="media-meta" datetime="2015-06-11T18:29:20+08:00">Last week</time></small>
|
|
</div>
|
|
</a><a class="d-flex justify-content-between" href="javascript:void(0)">
|
|
<div class="media d-flex align-items-start">
|
|
<div class="media-left"><i class="feather icon-file font-medium-5 warning"></i></div>
|
|
<div class="media-body">
|
|
<h6 class="warning media-heading">Generate monthly report</h6><small class="notification-text">Chocolate cake oat cake tiramisu marzipan</small>
|
|
</div><small>
|
|
<time class="media-meta" datetime="2015-06-11T18:29:20+08:00">Last month</time></small>
|
|
</div>
|
|
</a></li>
|
|
<li class="dropdown-menu-footer"><a class="dropdown-item p-1 text-center" href="javascript:void(0)">Read all notifications</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-user nav-item"><a class="dropdown-toggle nav-link dropdown-user-link" href="#" data-toggle="dropdown">
|
|
<div class="user-nav d-sm-flex d-none"><span class="user-name text-bold-600">John Doe</span><span class="user-status">Available</span></div><span><img class="round" src="../../../app-assets/images/portrait/small/avatar-s-11.png" alt="avatar" height="40" width="40" /></span>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="page-user-profile.html"><i class="feather icon-user"></i> Edit Profile</a><a class="dropdown-item" href="app-email.html"><i class="feather icon-mail"></i> My Inbox</a><a class="dropdown-item" href="app-todo.html"><i class="feather icon-check-square"></i> Task</a><a class="dropdown-item" href="app-chat.html"><i class="feather icon-message-square"></i> Chats</a>
|
|
<div class="dropdown-divider"></div><a class="dropdown-item" href="auth-login.html"><i class="feather icon-power"></i> Logout</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- END: Header-->
|
|
|
|
<div class="content-wrapper">
|
|
<div class="content-header row">
|
|
<div class="content-header-left col-md-9 col-12 mb-2">
|
|
<div class="row breadcrumbs-top">
|
|
<div class="col-12">
|
|
<h2 class="content-header-title float-left mb-0">Modal</h2>
|
|
<div class="breadcrumb-wrapper col-12">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="index.html">Home</a>
|
|
</li>
|
|
<li class="breadcrumb-item"><a href="#">Components</a>
|
|
</li>
|
|
<li class="breadcrumb-item active">Modal
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-header-right text-md-right col-md-3 col-12 d-md-block d-none">
|
|
<div class="form-group breadcrum-right">
|
|
<div class="dropdown">
|
|
<button class="btn-icon btn btn-primary btn-round btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-settings"></i></button>
|
|
<div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="#">Chat</a><a class="dropdown-item" href="#">Email</a><a class="dropdown-item" href="#">Calendar</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-body">
|
|
<!-- Basic Modals start -->
|
|
<section id="basic-modals">
|
|
<div class="row match-height">
|
|
<div class="col-lg-3 col-md-6 col-sm-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Basic Modal</h4>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<p>Toggle a modal via JavaScript by clicking the button above.</p>
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-outline-primary block btn-lg" data-toggle="modal" data-target="#default">
|
|
Launch Modal
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade text-left" id="default" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-scrollable" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="myModalLabel1">Basic Modal</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<h5>Check First Paragraph</h5>
|
|
<p>Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie.
|
|
Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake
|
|
cheesecake cookie chocolate cake liquorice.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal">Accept</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6 col-sm-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">
|
|
Vertically Centered
|
|
</h4>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-body">
|
|
<p>
|
|
Add <code>.modal-dialog-centered</code> to <code>.modal-dialog</code> to vertically center the modal.
|
|
</p>
|
|
<button type="button" class="btn btn-outline-primary btn-lg block" data-toggle="modal" data-target="#exampleModalCenter">
|
|
Launch Modal
|
|
</button>
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-centered modal-dialog-scrollable" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalCenterTitle">Vertically Centered</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Croissant jelly-o halvah chocolate sesame snaps. Brownie caramels candy canes chocolate cake
|
|
marshmallow icing lollipop I love. Gummies macaroon donut caramels biscuit topping danish.
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal">Accept</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6 col-sm-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Disabled Backdrop</h4>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-body">
|
|
<p>You can disable the backdrop by using <code>data-backdrop="false"</code></p>
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-outline-primary block btn-lg" data-toggle="modal" data-backdrop="false" data-target="#backdrop">
|
|
Launch Modal
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade text-left" id="backdrop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel4" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="myModalLabel4">Disabled Backdrop</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
Candy oat cake topping topping chocolate cake. Icing pudding jelly beans I love chocolate carrot
|
|
cake wafer candy canes. Biscuit croissant fruitcake bonbon soufflé.
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal">Accept</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6 col-sm-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Disabled Animation</h4>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-body">
|
|
<p>For modals that simply appear rather than fade in to view, remove the .fade class from your modal
|
|
markup.</p>
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-outline-primary block btn-lg" data-toggle="modal" data-target="#animation">
|
|
Launch Modal
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal text-left" id="animation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel6" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="myModalLabel6">Disabled Animation</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
Chocolate bar jelly dragée cupcake chocolate bar I love donut liquorice. Powder I love marzipan
|
|
donut candy canes jelly-o. Dragée liquorice apple pie candy biscuit danish lemon drops sugar plum.
|
|
</p>
|
|
<div class="alert alert-success" role="alert">
|
|
<span class="text-bold-600">Well done!</span> You successfully read this important alert
|
|
message.
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal">Accept</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Basic Modals end -->
|
|
|
|
<!-- Modal Themes start -->
|
|
<section id="modal-themes">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Modal Themes</h4>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-body">
|
|
<p class="mb-1">
|
|
Use class <code>.bg-*</code> with your <code>.modal-header</code> to change theme of modal
|
|
</p>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="modal-primary mr-1 mb-1 d-inline-block">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#primary">
|
|
Primary
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade text-left" id="primary" tabindex="-1" role="dialog" aria-labelledby="myModalLabel160" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-primary white">
|
|
<h5 class="modal-title" id="myModalLabel160">Primary Modal</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Tart lemon drops macaroon oat cake chocolate toffee chocolate bar icing. Pudding jelly beans
|
|
carrot cake pastry gummies cheesecake lollipop. I love cookie lollipop cake I love sweet
|
|
gummi
|
|
bears cupcake dessert.
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal">Accept</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-success mr-1 mb-1 d-inline-block">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#success">
|
|
Success
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade text-left" id="success" tabindex="-1" role="dialog" aria-labelledby="myModalLabel110" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-success white">
|
|
<h5 class="modal-title" id="myModalLabel110">Success Modal</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Tart lemon drops macaroon oat cake chocolate toffee chocolate bar icing. Pudding jelly beans
|
|
carrot cake pastry gummies cheesecake lollipop. I love cookie lollipop cake I love sweet
|
|
gummi
|
|
bears cupcake dessert.
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-success" data-dismiss="modal">Accept</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-danger mr-1 mb-1 d-inline-block">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#danger">
|
|
Danger
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade text-left" id="danger" tabindex="-1" role="dialog" aria-labelledby="myModalLabel120" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-danger white">
|
|
<h5 class="modal-title" id="myModalLabel120">Danger Modal</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Tart lemon drops macaroon oat cake chocolate toffee chocolate bar icing. Pudding jelly beans
|
|
carrot cake pastry gummies cheesecake lollipop. I love cookie lollipop cake I love sweet
|
|
gummi
|
|
bears cupcake dessert.
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-danger" data-dismiss="modal">Accept</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-info mr-1 mb-1 d-inline-block">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-outline-info" data-toggle="modal" data-target="#info">
|
|
Info
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade text-left" id="info" tabindex="-1" role="dialog" aria-labelledby="myModalLabel130" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-info white">
|
|
<h5 class="modal-title" id="myModalLabel130">Info Modal</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Tart lemon drops macaroon oat cake chocolate toffee chocolate bar icing. Pudding jelly beans
|
|
carrot cake pastry gummies cheesecake lollipop. I love cookie lollipop cake I love sweet
|
|
gummi
|
|
bears cupcake dessert.
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-info" data-dismiss="modal">Accept</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-warning mr-1 mb-1 d-inline-block">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-outline-warning" data-toggle="modal" data-target="#warning">
|
|
Warning
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade text-left" id="warning" tabindex="-1" role="dialog" aria-labelledby="myModalLabel140" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-warning white">
|
|
<h5 class="modal-title" id="myModalLabel140">Warning Modal</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Tart lemon drops macaroon oat cake chocolate toffee chocolate bar icing. Pudding jelly beans
|
|
carrot cake pastry gummies cheesecake lollipop. I love cookie lollipop cake I love sweet
|
|
gummi
|
|
bears cupcake dessert.
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-warning" data-dismiss="modal">Accept</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-dark mr-1 mb-1 d-inline-block">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-outline-dark" data-toggle="modal" data-target="#dark">
|
|
Dark
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade text-left" id="dark" tabindex="-1" role="dialog" aria-labelledby="myModalLabel150" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-dark white">
|
|
<h5 class="modal-title" id="myModalLabel150">Dark Modal</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Tart lemon drops macaroon oat cake chocolate toffee chocolate bar icing. Pudding jelly beans
|
|
carrot cake pastry gummies cheesecake lollipop. I love cookie lollipop cake I love sweet
|
|
gummi
|
|
bears cupcake dessert.
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-dark" data-dismiss="modal">Accept</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Modal Themes end -->
|
|
|
|
<!-- Modal Sizes start -->
|
|
<section id="modal-sizes">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Modal Sizes</h4>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-body">
|
|
<p>
|
|
Add class <code>.nodal-{xs|sm|lg|xl}</code> with <code>.modalo-dialog</code> to create a modal with size
|
|
</p>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="modal-size-xs mr-1 mb-1 d-inline-block">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-outline-warning" data-toggle="modal" data-target="#xSmall">
|
|
Extra Small
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade text-left" id="xSmall" tabindex="-1" role="dialog" aria-labelledby="myModalLabel20" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xs" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="myModalLabel20">Extra Small Modal</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Halvah powder wafer. Chupa chups pie topping carrot cake cake. Tootsie roll sesame snaps
|
|
jelly-o marshmallow marshmallow jelly jujubes candy. Chupa chups cheesecake gingerbread chupa
|
|
chups cake candy canes sweet roll.
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Accept</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-size-sm mr-1 mb-1 d-inline-block">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-outline-warning" data-toggle="modal" data-target="#small">
|
|
Small Modal
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade text-left" id="small" tabindex="-1" role="dialog" aria-labelledby="myModalLabel19" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-sm" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="myModalLabel19">Small Modal</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Biscuit chocolate cake gummies. Lollipop I love macaroon bear claw caramels. I love
|
|
marshmallow tiramisu I love fruitcake I love gummi bears.
|
|
Carrot cake topping liquorice. Pudding caramels liquorice sweet I love. Donut powder cupcake
|
|
ice cream tootsie roll jelly.
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal">Accept</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-size-default mr-1 mb-1 d-inline-block">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-outline-warning" data-toggle="modal" data-target="#defaultSize">
|
|
Default Modal
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade text-left" id="defaultSize" tabindex="-1" role="dialog" aria-labelledby="myModalLabel18" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="myModalLabel18">Default Modal</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
I love candy candy cake powder I love icing ice cream pastry. Biscuit lemon drops sesame
|
|
snaps. Topping biscuit croissant gummi bears jelly beans cake cake bear claw muffin. Lemon
|
|
drops oat cake pastry bear claw liquorice lemon drops.
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal">Accept</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-size-lg mr-1 mb-1 d-inline-block">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-outline-warning" data-toggle="modal" data-target="#large">
|
|
Large Modal
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade text-left" id="large" tabindex="-1" role="dialog" aria-labelledby="myModalLabel17" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="myModalLabel17">Large Modal</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
I love tart cookie cupcake. I love chupa chups biscuit. I love marshmallow apple pie wafer
|
|
liquorice. Marshmallow cotton candy chocolate. Apple pie muffin tart. Marshmallow halvah pie
|
|
marzipan lemon drops jujubes. Macaroon sugar plum cake icing toffee.
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal">Accept</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-size-xl mr-1 mb-1 d-inline-block">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-outline-warning" data-toggle="modal" data-target="#xlarge">
|
|
Extra Large Modal
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade text-left" id="xlarge" tabindex="-1" role="dialog" aria-labelledby="myModalLabel16" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="myModalLabel16">Extra Large Modal</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Cake cupcake sugar plum. Sesame snaps pudding cupcake candy canes icing cheesecake. Sweet roll
|
|
pudding lollipop apple pie gummies dragée. Chocolate bar cookie caramels I love lollipop ice
|
|
cream tiramisu lollipop sweet.
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal">Accept</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Modal Sizes end -->
|
|
|
|
<!-- Modal Events start -->
|
|
<section id="modal-events">
|
|
<div class="row match-height">
|
|
<div class="col-lg-3 col-md-6 col-sm-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">On Show Event</h4>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-body">
|
|
<p>This event fires immediately when the show instance method is called. If caused by a click, the
|
|
clicked element is available as the relatedTarget property of the event.</p>
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-outline-danger block btn-lg" data-toggle="modal" id="onshowbtn" data-target="#onshow">
|
|
Launch Modal
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade text-left" id="onshow" tabindex="-1" role="dialog" aria-labelledby="myModalLabel21" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="myModalLabel21">Basic Modal</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Donut chocolate halvah I love caramels. Dessert croissant I love icing I love dragée candy canes
|
|
chocolate bar. Oat cake lollipop I love cake chocolate bar jelly sweet. I love cotton candy oat cake
|
|
jelly.
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Accept</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6 col-sm-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">
|
|
On Shown Event
|
|
</h4>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-body">
|
|
<p>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to
|
|
complete).</p>
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-outline-danger block btn-lg" data-toggle="modal" id="onshownbtn" data-target="#onshown">
|
|
Launch Modal
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade text-left" id="onshown" tabindex="-1" role="dialog" aria-labelledby="myModalLabel22" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="myModalLabel22">Basic Modal</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Jujubes chocolate bar topping sweet caramels chocolate cake. Fruitcake pie wafer toffee sweet roll
|
|
I love. Chocolate pastry halvah bear claw jelly beans sesame snaps candy canes cotton candy. Jelly
|
|
macaroon pie toffee cupcake soufflé cotton candy.
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Accept</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6 col-sm-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">
|
|
On Hide Event
|
|
</h4>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-body">
|
|
<p>This event is fired immediately when the hide instance method has been called.</p>
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-outline-danger block btn-lg" data-toggle="modal" id="onhidebtn" data-target="#onhide">
|
|
Launch Modal
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade text-left" id="onhide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel23" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="myModalLabel23">Basic Modal</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Sweet roll I love pudding sweet roll jujubes donut I love cookie tart. Chocolate cake I love bear
|
|
claw bonbon dragée. Jujubes carrot cake jujubes I love lemon drops cookie. Jelly beans jujubes
|
|
cotton candy tootsie roll.
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Accept</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6 col-sm-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">
|
|
On Hidden Event
|
|
</h4>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-body">
|
|
<p>This event is fired when the modal has finished being hidden from the user (will wait for CSS
|
|
transitions to complete).</p>
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-outline-danger block btn-lg" data-toggle="modal" id="onhiddenbtn" data-target="#onhidden">
|
|
Launch Modal
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade text-left" id="onhidden" tabindex="-1" role="dialog" aria-labelledby="myModalLabel24" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="myModalLabel24">Basic Modal</h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Cookie cupcake dessert cotton candy donut cupcake marshmallow pie marzipan. Tootsie roll wafer
|
|
sesame
|
|
snaps gummi bears cake. Cake icing cupcake I love gummi bears. Halvah I love chupa chups I love
|
|
bonbon
|
|
I love.
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Accept</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Modal Events end -->
|
|
|
|
<!-- Form and scrolling Components start -->
|
|
<section id="form-and-scrolling-components">
|
|
<div class="row match-height">
|
|
<div class="col-md-4 col-sm-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Form Components</h4>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-body">
|
|
<div class="form-group">
|
|
<h5>Login Form</h5>
|
|
<p> Created Simple Login Form.</p>
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#inlineForm">
|
|
Launch Modal
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade text-left" id="inlineForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel33" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="myModalLabel33">Inline Login Form </h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<form action="#">
|
|
<div class="modal-body">
|
|
<label>Email: </label>
|
|
<div class="form-group">
|
|
<input type="text" placeholder="Email Address" class="form-control">
|
|
</div>
|
|
|
|
<label>Password: </label>
|
|
<div class="form-group">
|
|
<input type="password" placeholder="Password" class="form-control">
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal">Login</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-sm-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Scrolling long Content</h4>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-body">
|
|
<p>If your content is longer you the page will autmatically adopt a scrollbar</p>
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#exampleModalLong">
|
|
Launch demo modal
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p> Biscuit powder jelly beans. Lollipop candy canes croissant icing chocolate cake. Cake fruitcake
|
|
powder pudding pastry.</p>
|
|
|
|
<p>Tootsie roll oat cake I love bear claw I love caramels caramels halvah chocolate bar. Cotton
|
|
candy
|
|
gummi bears pudding pie apple pie cookie. Cheesecake jujubes lemon drops danish dessert I love
|
|
caramels powder.</p>
|
|
|
|
<p> Chocolate cake icing tiramisu liquorice toffee donut sweet roll cake. Cupcake dessert icing
|
|
dragée
|
|
dessert. Liquorice jujubes cake tart pie donut. Cotton candy candy canes lollipop liquorice
|
|
chocolate marzipan muffin pie liquorice.
|
|
</p>
|
|
<p> Powder cookie jelly beans sugar plum ice cream. Candy canes I love powder sugar plum tiramisu.
|
|
Liquorice pudding chocolate cake cupcake topping biscuit. Lemon drops apple pie sesame snaps
|
|
tootsie
|
|
roll carrot cake soufflé halvah.
|
|
Biscuit powder jelly beans. Lollipop candy canes croissant icing chocolate cake. Cake fruitcake
|
|
powder pudding pastry.</p>
|
|
|
|
<p>Tootsie roll oat cake I love bear claw I love caramels caramels halvah chocolate bar. Cotton
|
|
candy
|
|
gummi bears pudding pie apple pie cookie. Cheesecake jujubes lemon drops danish dessert I love
|
|
caramels powder.</p>
|
|
|
|
<p> Chocolate cake icing tiramisu liquorice toffee donut sweet roll cake. Cupcake dessert icing
|
|
dragée
|
|
dessert. Liquorice jujubes cake tart pie donut. Cotton candy candy canes lollipop liquorice
|
|
chocolate marzipan muffin pie liquorice.</p>
|
|
|
|
<p> Powder cookie jelly beans sugar plum ice cream. Candy canes I love powder sugar plum tiramisu.
|
|
Liquorice pudding chocolate cake cupcake topping biscuit. Lemon drops apple pie sesame snaps
|
|
tootsie
|
|
roll carrot cake soufflé halvah.
|
|
Biscuit powder jelly beans. Lollipop candy canes croissant icing chocolate cake. Cake fruitcake
|
|
powder pudding pastry.</p>
|
|
|
|
<p> Tootsie roll oat cake I love bear claw I love caramels caramels halvah chocolate bar. Cotton
|
|
candy
|
|
gummi bears pudding pie apple pie cookie. Cheesecake jujubes lemon drops danish dessert I love
|
|
caramels powder.</p>
|
|
|
|
<p> Chocolate cake icing tiramisu liquorice toffee donut sweet roll cake. Cupcake dessert icing
|
|
dragée
|
|
dessert. Liquorice jujubes cake tart pie donut. Cotton candy candy canes lollipop liquorice
|
|
chocolate marzipan muffin pie liquorice.</p>
|
|
|
|
<p> Powder cookie jelly beans sugar plum ice cream. Candy canes I love powder sugar plum tiramisu.
|
|
Liquorice pudding chocolate cake cupcake topping biscuit. Lemon drops apple pie sesame snaps
|
|
tootsie
|
|
roll carrot cake soufflé halvah.
|
|
Biscuit powder jelly beans. Lollipop candy canes croissant icing chocolate cake. Cake fruitcake
|
|
powder pudding pastry.</p>
|
|
|
|
<p> Tootsie roll oat cake I love bear claw I love caramels caramels halvah chocolate bar. Cotton
|
|
candy
|
|
gummi bears pudding pie apple pie cookie. Cheesecake jujubes lemon drops danish dessert I love
|
|
caramels powder.</p>
|
|
|
|
<p> Chocolate cake icing tiramisu liquorice toffee donut sweet roll cake. Cupcake dessert icing
|
|
dragée
|
|
dessert. Liquorice jujubes cake tart pie donut. Cotton candy candy canes lollipop liquorice
|
|
chocolate marzipan muffin pie liquorice.</p>
|
|
|
|
<p>Powder cookie jelly beans sugar plum ice cream. Candy canes I love powder sugar plum tiramisu.
|
|
Liquorice pudding chocolate cake cupcake topping biscuit. Lemon drops apple pie sesame snaps
|
|
tootsie
|
|
roll carrot cake soufflé halvah.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal">Accept</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-sm-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Scrolling long Content Inside Modal</h4>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-body">
|
|
<p>You can also create a scrollable modal that allows scroll the modal body by adding
|
|
<code>.modal-dialog-scrollable</code> to <code>.modal-dialog</code>.</p>
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#exampleModalScrollable">
|
|
Launch demo modal
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-scrollable" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p> Biscuit powder jelly beans. Lollipop candy canes croissant icing chocolate cake. Cake fruitcake
|
|
powder pudding pastry.</p>
|
|
|
|
<p>Tootsie roll oat cake I love bear claw I love caramels caramels halvah chocolate bar. Cotton
|
|
candy
|
|
gummi bears pudding pie apple pie cookie. Cheesecake jujubes lemon drops danish dessert I love
|
|
caramels powder.</p>
|
|
|
|
<p> Chocolate cake icing tiramisu liquorice toffee donut sweet roll cake. Cupcake dessert icing
|
|
dragée
|
|
dessert. Liquorice jujubes cake tart pie donut. Cotton candy candy canes lollipop liquorice
|
|
chocolate marzipan muffin pie liquorice.
|
|
</p>
|
|
<p> Powder cookie jelly beans sugar plum ice cream. Candy canes I love powder sugar plum tiramisu.
|
|
Liquorice pudding chocolate cake cupcake topping biscuit. Lemon drops apple pie sesame snaps
|
|
tootsie
|
|
roll carrot cake soufflé halvah.
|
|
Biscuit powder jelly beans. Lollipop candy canes croissant icing chocolate cake. Cake fruitcake
|
|
powder pudding pastry.</p>
|
|
|
|
<p>Tootsie roll oat cake I love bear claw I love caramels caramels halvah chocolate bar. Cotton
|
|
candy
|
|
gummi bears pudding pie apple pie cookie. Cheesecake jujubes lemon drops danish dessert I love
|
|
caramels powder.</p>
|
|
|
|
<p> Chocolate cake icing tiramisu liquorice toffee donut sweet roll cake. Cupcake dessert icing
|
|
dragée
|
|
dessert. Liquorice jujubes cake tart pie donut. Cotton candy candy canes lollipop liquorice
|
|
chocolate marzipan muffin pie liquorice.</p>
|
|
|
|
<p> Powder cookie jelly beans sugar plum ice cream. Candy canes I love powder sugar plum tiramisu.
|
|
Liquorice pudding chocolate cake cupcake topping biscuit. Lemon drops apple pie sesame snaps
|
|
tootsie
|
|
roll carrot cake soufflé halvah.
|
|
Biscuit powder jelly beans. Lollipop candy canes croissant icing chocolate cake. Cake fruitcake
|
|
powder pudding pastry.</p>
|
|
|
|
<p> Tootsie roll oat cake I love bear claw I love caramels caramels halvah chocolate bar. Cotton
|
|
candy
|
|
gummi bears pudding pie apple pie cookie. Cheesecake jujubes lemon drops danish dessert I love
|
|
caramels powder.</p>
|
|
|
|
<p> Chocolate cake icing tiramisu liquorice toffee donut sweet roll cake. Cupcake dessert icing
|
|
dragée
|
|
dessert. Liquorice jujubes cake tart pie donut. Cotton candy candy canes lollipop liquorice
|
|
chocolate marzipan muffin pie liquorice.</p>
|
|
|
|
<p> Powder cookie jelly beans sugar plum ice cream. Candy canes I love powder sugar plum tiramisu.
|
|
Liquorice pudding chocolate cake cupcake topping biscuit. Lemon drops apple pie sesame snaps
|
|
tootsie
|
|
roll carrot cake soufflé halvah.
|
|
Biscuit powder jelly beans. Lollipop candy canes croissant icing chocolate cake. Cake fruitcake
|
|
powder pudding pastry.</p>
|
|
|
|
<p> Tootsie roll oat cake I love bear claw I love caramels caramels halvah chocolate bar. Cotton
|
|
candy
|
|
gummi bears pudding pie apple pie cookie. Cheesecake jujubes lemon drops danish dessert I love
|
|
caramels powder.</p>
|
|
|
|
<p> Chocolate cake icing tiramisu liquorice toffee donut sweet roll cake. Cupcake dessert icing
|
|
dragée
|
|
dessert. Liquorice jujubes cake tart pie donut. Cotton candy candy canes lollipop liquorice
|
|
chocolate marzipan muffin pie liquorice.</p>
|
|
|
|
<p>Powder cookie jelly beans sugar plum ice cream. Candy canes I love powder sugar plum tiramisu.
|
|
Liquorice pudding chocolate cake cupcake topping biscuit. Lemon drops apple pie sesame snaps
|
|
tootsie
|
|
roll carrot cake soufflé halvah.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal">Accept</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Form and scrolling Components end -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END: Content-->
|
|
|
|
<div class="sidenav-overlay"></div>
|
|
<div class="drag-target"></div>
|
|
|
|
<!-- BEGIN: Footer-->
|
|
<footer class="footer footer-static footer-light">
|
|
<p class="clearfix blue-grey lighten-2 mb-0"><span class="float-md-left d-block d-md-inline-block mt-25">COPYRIGHT © 2019<a class="text-bold-800 grey darken-2" href="https://themeforest.net/user/pixinvent/portfolio?ref=pixinvent" target="_blank">Pixinvent,</a>All rights Reserved</span><span class="float-md-right d-none d-md-block">Hand-crafted & Made with<i class="feather icon-heart pink"></i></span>
|
|
<button class="btn btn-primary btn-icon scroll-top" type="button"><i class="feather icon-arrow-up"></i></button>
|
|
</p>
|
|
</footer>
|
|
<!-- END: Footer-->
|
|
|
|
|
|
<!-- BEGIN: Vendor JS-->
|
|
<script src="../../../app-assets/vendors/js/vendors.min.js"></script>
|
|
<!-- BEGIN Vendor JS-->
|
|
|
|
<!-- BEGIN: Page Vendor JS-->
|
|
<!-- END: Page Vendor JS-->
|
|
|
|
<!-- BEGIN: Theme JS-->
|
|
<script src="../../../app-assets/js/core/app-menu.js"></script>
|
|
<script src="../../../app-assets/js/core/app.js"></script>
|
|
<script src="../../../app-assets/js/scripts/components.js"></script>
|
|
<!-- END: Theme JS-->
|
|
|
|
<!-- BEGIN: Page JS-->
|
|
<script src="../../../app-assets/js/scripts/modal/components-modal.js"></script>
|
|
<!-- END: Page JS-->
|
|
|
|
</body>
|
|
<!-- END: Body-->
|
|
|
|
</html> |