--- title: Roundtrip tagline: Enhanced Bootstrap Modals description: Enhanced Bootstrap Modals for J1 Template tags: [ Template, Roundtrip, Bootstrap, Extended, Modal] index: [] categories: [ pages ] flowtext: false permalink: /pages/public/start/roundtrip/modals/ regenerate: false resources: [ algolia ] resource_options: - masthead: opacity: 1.0 slides: - url: /"pages/roundtrip/bootstrap-modals.jpg alt: bootstrap-modals --- // Enable the Liquid Preprocessor // ----------------------------------------------------------------------------- :page-liquid: // Set other global page attributes here // ----------------------------------------------------------------------------- // Liquid procedures // ----------------------------------------------------------------------------- {% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%} // Initialize entry document paths // ----------------------------------------------------------------------------- {% include {{set_env_entry_document}} init_folders=all %} // Load tags and urls // ----------------------------------------------------------------------------- include::{includedir}/attributes.asciidoc[tag=tags] include::{includedir}/attributes.asciidoc[tag=urls] include::{includedir}/attributes.asciidoc[tag=data] // Additional Asciidoc page attributes goes here // ----------------------------------------------------------------------------- // Include sub-documents // ----------------------------------------------------------------------------- lorem:sentences[5] lorem:sentences[3] == J1 Modals pass:[] Refer to: https://mdbootstrap.com/legacy/4.3.2/?page=javascript/modals[MDB - Enhanced Bootstrap Modals, window="_blank"]. Enhanced J1 Bootstrap Modals are based on the free package `Bootstrap 4 plugin` based on (legycy) version 4.3.2 provided by https://mdbootstrap.com/[MDBootstrap.com]. Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the so that modal content scrolls instead. pass:[] Refer to: link:{bs_doc_components_modal}[Bootstrap Docs, window="_blank"]. Using J1 enhanced predefined modal styles, some emotional weight is added to the information displaye - ranging from a simple warning to critical system failure or from an operation success to a neutral information. If you want to learn about advanced usage of Modals, read our free tutorial https://mdbootstrap.com/automated-app-start/[Creating Automated web application]. See also: https://mdbootstrap.com/javascript/modals/[Modal Core Documentation], https://mdbootstrap.com/javascript/bootstrap-modal-examples/[Modal Forms and Modal Templates]. === Position and sizes lorem:sentences[5] ++++
Frame
Launch
Side
Launch
Central
Launch
Fluid

++++ lorem:sentences[5] === Contact Form Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. ++++
++++ === Top Info Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. ++++
++++ === Bottom Success Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. ++++
++++ === Top Right Success Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. ++++
++++ === Top Left Info Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. ++++
++++ === Bottom Right Danger Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. ++++
++++ === Bottom Left Warning Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. ++++
++++ === Form Login with Avatar Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. ++++
++++ === OmniLogin Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. ++++
++++ ++++ ++++ === Central Large Info Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. ++++
++++ === Central Fluid Success Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. ++++
++++ === Full Height Right Success Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. ++++
++++ === Full Height Left Info Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. ++++
++++ === Full Height Top Warning Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. ++++
++++ === Full Height Bottom Danger Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. ++++
++++ === Central Success Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. ++++
++++ == What's next? lorem:sentences[5] Check out what the build in link:{roundtrip-search-engine}[Search Engine, window="_blank"] can do! ++++ ++++