Popups

Displays a modal popup, based on the Bootstrap modal implementation.

Examples

<a data-toggle="modal" href="#contentBasic" class="btn btn-primary btn-lg">Launch basic content</a>

<div class="control-popup modal fade" id="contentBasic" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <p>This is a very basic example of a popup...</p>
            </div>
        </div>
    </div>
</div>

<a data-toggle="modal" href="#content-confirmation" class="btn btn-primary btn-lg">Launch Confirmation dialog</a>

<div class="control-popup modal fade" id="content-confirmation" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Are you sure you wanna do that?</h4>
            </div>
            <div class="modal-body">
                <p>This is your last chance. After this, there is no turning back.</p>
                <p>You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe. You take the red pill - you stay in Wonderland, and I show you how deep the rabbit hole goes.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Blue Pill</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Red Pill</button>
            </div>
        </div>
    </div>
</div>

Inline popups

An inline popup places the popup content inside the current page, hidden from the view. For example, this container will not be visible on the page.

<div class="control-popup modal fade" id="contentBasic">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <p>This is a very basic example of a popup...</p>
            </div>
        </div>
    </div>
</div>

Use the data-toggle="modal" HTML attribute to launch this container as a popup.

<a data-toggle="modal" href="#contentBasic" class="btn btn-primary btn-lg">
    Launch basic content
</a>

Remote popups

Content for the popup can be loaded remotely using an AJAX request. Use the data-handler attribute to populate a popup with the contents of an AJAX handler.

<a
    data-control="popup"
    data-handler="onLoadContent"
    href="javascript:;"
    class="btn btn-primary btn-lg">
    Launch Ajax Form
</a>

Using the data-ajax attribute you can refer to an external file or URL directly.

<a
    data-control="popup"
    data-ajax="popup-content.htm"
    href="javascript:;"
    class="btn btn-primary btn-lg">
    Launch Ajax Form
</a>

The partial for your rendered popup should follow this structure:

<div class="modal-header">
    <button type="button" class="close" data-dismiss="popup">&times;</button>
    <h4 class="modal-title">
        <!-- Modal header title goes here -->
        Send email
    </h4>
</div>
<div class="modal-body">
    <!-- Any popup content goes here -->
    <?= $this->customFormWidget->render() ?>
</div>
<div class="modal-footer">
    <!-- Popup action buttons go here -->
    <button
        type="submit"
        class="btn btn-primary wn-icon-send"
        data-load-indicator="Sending">
        Send
    </button>
    <button
        type="button"
        class="btn btn-default"
        data-dismiss="popup">
        <?= e(trans('backend::lang.relation.close')) ?>
    </button>
</div>

API documentation

Options:

  • content: content HTML string or callback

Data attributes

  • data-control="popup" - enables the ajax popup plugin
  • data-ajax="popup-content.htm" - ajax content to load
  • data-handler="onLoadContent" - Winter ajax request name
  • data-keyboard="false" - Allow popup to be closed with the keyboard
  • data-extra-data="file_id: 1" - Winter ajax request data
  • data-size="large" - Popup size, available sizes: giant, huge, large, small, tiny, adaptive (will scale to fit the window)
  • data-adaptive-height="false" - Allow the popup to fill the height of the screen

JavaScript API

$('a#someLink').popup({ ajax: 'popup-content.htm' })
$('a#someLink').popup({ handler: 'onLoadSomePopup' })
$('a#someLink').popup({ handler: 'onLoadSomePopup', extraData: { id: 3 } })

Keep informed

Sign up to our newsletter to receive updates on Winter CMS releases, new features in the works, and much more.
We'll never spam or give this address away.

Latest blog post

The Winter CMS Web Installer is now available!

Published June 17, 2021
We are super excited to announce that our new Web-based Installer is finally available for download, to make it super easy to get your next Winter CMS project started!

View this post Read all posts

Latest Winter CMS release

v1.1.3

Released April 26, 2021
3 UX/UI Improvements, 19 API Changes, 23 Bug Fixes, 3 Security Improvements, 4 Translation Improvements, 1 Community Improvement, 2 Dependencies

View details View all releases