---
title:                                  Advanced Modals
title_extention:                        Advanced Bootstrap Modals for J1 Template
tagline:                                Improve Visitor Experience

date:                                   2020-11-08
#last_modified:                         2023-01-01

description: >
                                        J1 Template supports a rich 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: >
                                        open source, free, template, jekyll, jekyllone, web,
                                        sites, static, jamstack, bootstrap,
                                        modals, advanced, extension

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

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

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

resources:                              [ animate, rouge ]
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 Template supports a rich set of advanced Bootstrap Modals that add dialogs
to your web pages for user notifications. This advanced Modals highlight
important information to your visitors.

The dialogs are positioned over everything else in the document so that
messages get the full user's attention.

mdi:clock-time-five-outline[24px, md-gray mt-5 mr-2]
*5-10 Minutes* to read

// Include sub-documents (if any)
// -----------------------------------------------------------------------------

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

[role="mt-5"]
== 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 Template
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[]


[role="mt-5"]
== What next

Bootstrap is a helpful framework that offers a complete set of styles to
create excellent responsive designs. In the sense that all can be improved,
responsive tables supported by Bootstrap should get some enhancement to
display on low-resolution devices or smaller window sizes better.

The theme Jekyll One supports a new design for responsive tables but based
on Bootstrap. The approach used by J1 Template is based on 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!

[role="mb-7"]
Check out from here what
link:{url-roundtrip--responsive-tables}[Responsive Tables] can do!