279 lines
22 KiB
Plaintext
279 lines
22 KiB
Plaintext
- var theme_customizer = true;
|
|
- var tooltip = true;
|
|
|
|
doctype html
|
|
html(lang='en')
|
|
include ../../components/header-files
|
|
body
|
|
include ../../components/loader
|
|
// page-wrapper Start
|
|
#pageWrapper.page-wrapper
|
|
include ../../components/header
|
|
// Page Body Start
|
|
.page-body-wrapper.horizontal-menu
|
|
include ../../components/sidebar
|
|
.page-body
|
|
.container-fluid
|
|
.page-header
|
|
.row
|
|
.col-sm-6
|
|
h3
|
|
| Modal
|
|
ol.breadcrumb
|
|
li.breadcrumb-item
|
|
a(href='index.html')
|
|
| Home
|
|
li.breadcrumb-item Base
|
|
li.breadcrumb-item.active Modal
|
|
.col-sm-6
|
|
include ../../components/bookmark
|
|
// Container-fluid starts
|
|
.container-fluid
|
|
.row
|
|
.col-sm-12
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Static Example
|
|
.card-body
|
|
#example.modal-dialog.modal-lg.mt-0.mb-0(tabindex='-1', role='dialog', aria-labelledby='exampleModalLabel', aria-hidden='true')
|
|
.modal-dialog.mt-0.mb-0(role='document')
|
|
.modal-content
|
|
.modal-header
|
|
h5.modal-title New message
|
|
button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
|
|
.modal-body
|
|
p
|
|
| 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.
|
|
.modal-footer
|
|
button.btn.btn-secondary(type='button', data-bs-dismiss='modal') Close
|
|
button.btn.btn-primary(type='button') Send message
|
|
.col-sm-12
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Basic Modal
|
|
.card-body.btn-showcase
|
|
// Simple demo
|
|
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-original-title='test', data-bs-target='#exampleModal') Simple
|
|
#exampleModal.modal.fade(tabindex='-1', role='dialog', aria-labelledby='exampleModalLabel', aria-hidden='true')
|
|
.modal-dialog(role='document')
|
|
.modal-content
|
|
.modal-header
|
|
h5#exampleModalLabel.modal-title Modal title
|
|
button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
|
|
.modal-body
|
|
| ...
|
|
.modal-footer
|
|
button.btn.btn-primary(type='button', data-bs-dismiss='modal') Close
|
|
button.btn.btn-secondary(type='button') Save changes
|
|
// Scrolling long content
|
|
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='#exampleModalLong')
|
|
| Scrolling long content
|
|
#exampleModalLong.modal.fade(tabindex='-1', role='dialog', aria-labelledby='exampleModalLongTitle', aria-hidden='true')
|
|
.modal-dialog(role='document')
|
|
.modal-content
|
|
.modal-header
|
|
h5#exampleModalLongTitle.modal-title Modal title
|
|
button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
|
|
.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
|
|
| Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
|
|
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
|
|
| 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
|
|
| Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
|
|
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
|
|
| 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
|
|
| Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
|
|
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
|
|
| 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
|
|
| Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
|
|
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
|
|
| 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
|
|
| Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
|
|
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
|
|
| 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
|
|
| Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
|
|
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.
|
|
.modal-footer
|
|
button.btn.btn-secondary(type='button', data-bs-dismiss='modal') Close
|
|
button.btn.btn-primary(type='button') Save changes
|
|
// Vertically centered modal
|
|
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='#exampleModalCenter')
|
|
| Vertically centered
|
|
#exampleModalCenter.modal.fade(tabindex='-1', role='dialog', aria-labelledby='exampleModalCenter', aria-hidden='true')
|
|
.modal-dialog.modal-dialog-centered(role='document')
|
|
.modal-content
|
|
.modal-header
|
|
h5.modal-title Modal title
|
|
button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
|
|
.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.
|
|
.modal-footer
|
|
button.btn.btn-secondary(type='button', data-bs-dismiss='modal') Close
|
|
button.btn.btn-primary(type='button') Save changes
|
|
// Tooltips and popovers modal
|
|
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='#tooltipmodal')
|
|
| Tooltips and popovers
|
|
#tooltipmodal.modal.fade(tabindex='-1', role='dialog', aria-labelledby='tooltipmodal', aria-hidden='true')
|
|
.modal-dialog.modal-dialog-centered(role='document')
|
|
.modal-content
|
|
.modal-header
|
|
h5.modal-title Modal title
|
|
button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
|
|
.modal-body
|
|
h5 Popover in a modal
|
|
p
|
|
| This
|
|
a.btn.btn-primary.popover-test(href='#', role='button', title='', data-content='Popover body content is set in this attribute.', data-container='#exampleModalPopovers', data-original-title='Popover title') button
|
|
| triggers a popover on click.
|
|
hr
|
|
h5 Tooltips in a modal
|
|
p
|
|
a.tooltip-test(href='#', title='', data-container='#exampleModalPopovers', data-original-title='Tooltip') This link
|
|
| and
|
|
a.tooltip-test(href='#', title='', data-container='#exampleModalPopovers', data-original-title='Tooltip') that link
|
|
| have tooltips on hover.
|
|
.modal-footer
|
|
button.btn.btn-secondary(type='button', data-bs-dismiss='modal') Close
|
|
button.btn.btn-primary(type='button') Save changes
|
|
// Using the grid modal
|
|
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='#grid-modal')
|
|
| Using the grid
|
|
#grid-modal.modal.fade(tabindex='-1', role='dialog', aria-labelledby='grid-modal', aria-hidden='true')
|
|
.modal-dialog.modal-dialog-centered(role='document')
|
|
.modal-content
|
|
.modal-header
|
|
h5.modal-title Modal title
|
|
button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
|
|
.modal-body.grid-showcase
|
|
.container-fluid.bd-example-row
|
|
.row
|
|
.col-md-4
|
|
span .col-md-4
|
|
.col-md-4.ml-auto
|
|
span .col-md-4 .ml-auto
|
|
.row
|
|
.col-md-3.ml-auto
|
|
span .col-md-3 .ml-auto
|
|
.col-md-2.ml-auto
|
|
span .col-md-2 .ml-auto
|
|
.row
|
|
.col-md-6.ml-auto
|
|
span .col-md-6 .ml-auto
|
|
.row
|
|
.col-sm-9
|
|
span Level 1: .col-sm-9
|
|
.row
|
|
.col-8.col-sm-6
|
|
span Level 2: .col-8 .col-sm-6
|
|
.col-4.col-sm-6
|
|
span Level 2: .col-4 .col-sm-6
|
|
.modal-footer
|
|
button.btn.btn-secondary(type='button', data-bs-dismiss='modal') Close
|
|
button.btn.btn-primary(type='button') Save changes
|
|
.col-sm-12
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Varying modal content
|
|
.card-body.btn-showcase
|
|
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='#exampleModalfat', data-whatever='@mdo') Open modal for @mdo
|
|
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='#exampleModalmdo', data-whatever='@fat') Open modal for @fat
|
|
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='#exampleModalgetbootstrap', data-whatever='@getbootstrap') Open modal for @getbootstrap
|
|
#exampleModalfat.modal.fade(tabindex='-1', role='dialog', aria-labelledby='exampleModalLabel', aria-hidden='true')
|
|
.modal-dialog(role='document')
|
|
.modal-content
|
|
.modal-header
|
|
h5#exampleModalLabel2.modal-title New message
|
|
button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
|
|
.modal-body
|
|
form
|
|
.mb-3
|
|
label.col-form-label(for='recipient-name') Recipient:
|
|
input.form-control(type='text', value='@fat')
|
|
.mb-3
|
|
label.col-form-label(for='message-text') Message:
|
|
textarea#message-text.form-control
|
|
.modal-footer
|
|
button.btn.btn-secondary(type='button', data-bs-dismiss='modal') Close
|
|
button.btn.btn-primary(type='button') Send message
|
|
#exampleModalmdo.modal.fade(tabindex='-1', role='dialog', aria-labelledby='exampleModalLabel', aria-hidden='true')
|
|
.modal-dialog(role='document')
|
|
.modal-content
|
|
.modal-header
|
|
h5.modal-title New message
|
|
button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
|
|
.modal-body
|
|
form
|
|
.mb-3
|
|
label.col-form-label(for='recipient-name') Recipient:
|
|
input#recipient-name.form-control(type='text', value='@Mat')
|
|
.mb-3
|
|
label.col-form-label(for='message-text') Message:
|
|
textarea.form-control
|
|
.modal-footer
|
|
button.btn.btn-secondary(type='button', data-bs-dismiss='modal') Close
|
|
button.btn.btn-primary(type='button') Send message
|
|
#exampleModalgetbootstrap.modal.fade(tabindex='-1', role='dialog', aria-labelledby='exampleModalLabel', aria-hidden='true')
|
|
.modal-dialog(role='document')
|
|
.modal-content
|
|
.modal-header
|
|
h5.modal-title New message
|
|
button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
|
|
.modal-body
|
|
form
|
|
.mb-3
|
|
label.col-form-label(for='recipient-name') Recipient:
|
|
input.form-control(type='text', value='@getbootstrap')
|
|
.mb-3
|
|
label.col-form-label(for='message-text') Message:
|
|
textarea.form-control
|
|
.modal-footer
|
|
button.btn.btn-secondary(type='button', data-bs-dismiss='modal') Close
|
|
button.btn.btn-primary(type='button') Send message
|
|
.col-sm-12
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Sizes modal
|
|
.card-body.btn-showcase
|
|
// Large modal
|
|
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='.bd-example-modal-lg') Large modal
|
|
.modal.fade.bd-example-modal-lg(tabindex='-1', role='dialog', aria-labelledby='myLargeModalLabel', aria-hidden='true')
|
|
.modal-dialog.modal-lg
|
|
.modal-content
|
|
.modal-header
|
|
h4#myLargeModalLabel.modal-title Large modal
|
|
button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
|
|
.modal-body
|
|
| ...
|
|
// Small modal
|
|
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='.bd-example-modal-sm') Small modal
|
|
.modal.fade.bd-example-modal-sm(tabindex='-1', role='dialog', aria-labelledby='mySmallModalLabel', aria-hidden='true')
|
|
.modal-dialog.modal-sm
|
|
.modal-content
|
|
.modal-header
|
|
h4#mySmallModalLabel.modal-title Small modal
|
|
button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
|
|
.modal-body
|
|
| ...
|
|
// Container-fluid Ends
|
|
include ../../components/footer
|
|
include ../../components/footer-files
|