---
title:                                  Modals
tagline:                                Improve Visitor Experience
date:                                   2020-11-08 00:00:00
description: >
                                        J1 Theme supports a large set of advanced Bootstrap Modals
                                        that add dialogs to your web pages for user notifications.
                                        The advanced Modals highlight important information to your
                                        visitors. Modals are positioned over everything else in the
                                        document so that messages get the full user's attention.

keywords: >
                                        Jekyll, Theme, JekyllOne, Bootstrap, Modals, Advanced, Extension,
                                        Roundtrip

categories:                             [ Roundtrip ]
tags:                                   [ Bootstrap, Modal, Extension ]

image:
  path:                                 /assets/images/pages/roundtrip/bootstrap-1920x1000-bw.jpg
  width:                                1920
  height:                               1280
  alt:                                  Bootstrap Framework Logo

regenerate:                             false
permalink:                              /pages/public/learn/roundtrip/modals/

resources:                              [ animate ]
resource_options:
  - attic:
      slides:
        - url:                          /assets/images/pages/roundtrip/bootstrap-1920x1000-bw.jpg
          alt:                          Bootstrap Framework Logo
---

// Page Initializer
// =============================================================================
// Enable the Liquid Preprocessor
:page-liquid:

// Set (local) page attributes here
// -----------------------------------------------------------------------------
// :page--attr:                         <attr-value>
:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images

//  Load Liquid procedures
// -----------------------------------------------------------------------------
{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}

// Load page attributes
// -----------------------------------------------------------------------------
{% include {{load_attributes}} scope="all" %}


// Page content
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[role="dropcap"]
J1 Theme supports a large set of advanced Bootstrap Modals that add dialogs
to your web pages for user notifications. The advanced Modals highlight
important information to your visitors. Modals are positioned over everything
else in the document so that messages get the full user's attention.

// Include sub-documents (if any)
// -----------------------------------------------------------------------------
[role="mt-4"]
== Modal Examples

Improve your reader's experience with important information that be noticed.
Modals are a great choice to bring the user's attention. Using the J1 Theme
enhanced modal styles, emotional weight is added to the information displayed.
Ranging from an info level, a simple warning to critical messages.

TIP: For more information on how to use Bootstrap’s JavaScript modal
plugin, refer to: link:{url-bs-docs--components-modal}[Bootstrap Docs, {browser-window--new}].

// include::{documentdir}/tables/bs_modal_examples.asciidoc[]
include::{documentdir}/410_table_bs_modal_examples.asciidoc[]

== What next

Bootstrap is a helpful framework that offers a complete set of styles in
the current V5 version to create excellent responsive designs. In the sense
that all can be improved, the responsive tables support of BS needs some
enhancement to display tables on low-resolution devices or smaller window
sizes.

The Jekyll Theme JekyllOne supports a new design for responsive tables based
on Bootstrap. The approach used by J1 Theme is based on pure CSS styles on
top of the classic Bootstrap tags for simplicity and portability to be viewed
best on all devices and browsers. Responsive tables help to read this important
information on mobiles a lot. This feature is what is meant to be fully
responsive!

Check out from here what the
link:{url-roundtrip--responsive-tables}[Responsive Tables] can do!

// Include the modals HTML portion
// -----------------------------------------------------------------------------
include::{documentdir}/419_advanced_modals_demo.asciidoc[]