File: /home/crm/public_html/wwwroot/assets/pug/pages/theme/modal.pug
- 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