Intro

Components

Components & Shortcodes

Internal Reference

Quick Image Reference

Modules

External Reference

Modals (with iframes)

The theme provides options for displaying forms and other Rock content via modals in addition to the standard modal functionality provided by Rock.

Link Examples
Modal HTML Content

In Short

Launch any link within a modal by adding the class js-launch-modal. Use the data attribute data-modal-close-confirmation="true" on the link to prevent the user from accidentally closing the modal. See examples

Keep in mind: All links contained within the modal will launch inside the modal unless target attributes are used to open the link on the parent page.

Working with iFrames

To launch a modal from a URL add js-launch-modal to any link. Pages with forms should use the "Full Width Narrow" layout to automatically hide the header, footer, and other page elements when displayed in a modal.

Working with Links

All links found within the modal will launch within the iframe. To cause links to update the parent page either use:

<a href="#" target="_top"></a> to replace the parent page.
<a href="#" target="_blank"></a> to open content in a new page.

Closing Modal from within Iframe

To close the modal from within the iframe use the js-modal-close class on a link:

<a href="#" class="js-modal-close">Close</a>

It's recommended to include a link as a fallback for users that have opened the page outside of a modal.

Close Confirmations

When using with longer, or multi-page forms it's recommended to enable modal-close-confirmation to prevent users from accidentally closing the modal. This will display an additional confirmation message before allowing the user to close the modal.

The close confirmation is not displayed when an element is displayed on the page with one of the following classes:

.js-workflow-entry-message-notification-box.alert-success displayed as a workflow success element
.js-allow-modal-close can be added to any element on a page to allow the page to load.

Options

Options are added via data- attributes, allowing for additional customization of modal behavior.

Name (`data-`)	Type	Default	Description
`modal-title`	string	`null`	When provided the modal will display with the provided string inside the `modal-header` before the iframe.
`modal-close-confirmation`	boolean	`false`	When `true` modal will display a confirmation message before closing. The message is not displayed when a workflow success alert is displayed or an element with `js-allow-modal-close` is found.
`modal-close-message`	string	`null`	When provided the modal will display the provided string as the modal close confirmation message. Otherwise, "Are you sure you want to exit the form? Your data will be lost if you haven't submitted it." is displayed.

Methods

The following javascript methods are available for use within the iframe to interact with the parent page:

window.parent.closeModal();

Closes the modal.

window.parent.resizeDynamicModal();

Force the modal to resize.

Examples

Standard Examples

<a href="https://www.thevillagechurch.net/page/3129" class="btn btn-primary js-launch-modal">Launch Modal</a>

<a href="https://www.thevillagechurch.net/page/3129" class="btn btn-primary js-launch-modal" data-modal-close-confirmation="true">Launch Modal with Close Confirmation</a>

<a href="https://www.thevillagechurch.net/page/3129" class="btn btn-primary js-launch-modal" data-modal-title="Associate Family Minister">Launch Modal with Title</a>

Launch Modal Markup

<a href="https://www.thevillagechurch.net/page/3137" class="btn btn-primary js-launch-modal" data-modal-close-confirmation="true" data-modal-title="Contact Us">Launch Contact Form with Close Confirmation</a>


<a href="https://www.thevillagechurch.net/page/3139" class="btn btn-primary js-launch-modal" data-modal-close-confirmation="true" data-modal-title="Counseling Request">Launch Counseling Request with Close Confirmation</a>


<a href="https://www.thevillagechurch.net/page/3140" class="btn btn-primary js-launch-modal" data-modal-close-confirmation="true" data-modal-title="Wedding &amp; Premarital Request">Launch Wedding & Premarital with Close Confirmation</a>


<a href="https://www.thevillagechurch.net/page/3084" class="btn btn-primary js-launch-modal" data-modal-close-confirmation="true" data-modal-close-message="Are you sure you want to leave Give Now? Your data will be lost if you haven't submitted it.">Launch Give Now with Close Confirmation</a>

Modal HTML Content

Example elements used by forms inside of iFrames.

Confirmation Messages

<div class="well modal-success-well">
    <h1 class="success-check">Thank you!</h1>
    <p>Line of copy about how much it means to contribute to TVC mission.</p>

    <a href="#" class="btn btn-primary btn-block js-modal-close">Done</a>
</div>

<hr>

<div class="well modal-success-well bg-primary">
    <h1 class="success-check">Thanks!</h1>
    <p>We can’t wait to read your application and meet you. You can expect to hear from us within [days].</p>

    <p>Until then, here’s a <a href="#">sermon on marriage</a> to help you prep!</p>

    <p>The Village Church</p>

    <a href="#" class="btn btn-action btn-block js-modal-close">Done</a>
</div>

Style Guide