Tornado Logo

Popup Modals - Tornado UI v2

Modals is a Popup dialog boxes that can be called up and interact with the user.

Sass Customize

in order to edit the Modals Style you can use the css classes to overide the theme or you can edit it with sass Tornado Folder/SCSS/components/_modals.scss and do not forget to compile the main files of the framework Tornado Folder/SCSS/tornado.scss and tornado-rtl.scss.

How it Works

most of the modal features is build with only css tricks its works easly by adding and removing a class name active to the modal box with the ID that exist in the call Button Attribute data-modal so you can easly Survey the call button and use the modal as part of your own function for using it for user action response.

Modal Structure

in order to build a modal component first you must have an event fire element to call the modal to show up so to do that you give any element you disire a data atribute called data-modal and give it a value of the modal box ID then you build your box structre by creating a wraper div wih class name modal-box with a uniuqe ID Attribute

and inside of the modal wraper you create the modal container with class name modal-content and here you can place any content you want you can use the Prdesigned Content Elements or build your own and for a close button inside the modal box is simple you can create your button and give a class name close-modal see the example below.

Modal Demo Example
<!-- Modal Button -->
<a href="#" class="btn primary" data-modal="modal-demo">Modal Demo</a>
<!-- Modal Box -->
<div class="modal-box" id="modal-demo">
    <!-- Container -->
    <div class="modal-content">
        <!-- Headline -->
        <h2 class="modal-head">
            Modal Demo Dialog Box Title
            <button class="close-modal ti-close"></button>
        </h2>
        <!-- Content -->
        <div class="modal-body">
            <p>It’s grown to become something of an artform, and there are countless filler text generators sprinkled around the web that provide a modern take on this classic staple of the design industry.</p>
        </div>
        <!-- Footer -->
        <div class="modal-footer">
            <a href="#" class="btn small primary">Submit Button</a>
            <a href="#" class="btn small danger close-modal">Cancel Button</a>
        </div>
    </div>
    <!--// Container -->
</div>
<!-- // Modal Box -->

Javascript Call Backs

tornado Popup Modals provide Four Callback’s functions that you can apply with HTML data attributes you give it to the Open Button or the Modal Box data-call-before=”but Your Function Name Without ()” to Fire the Function Before Modal Opens data-call-after=”but Your Function Name Without ()” to Fire the Function After Modal Open

<!-- Before Open Modal from Button -->
<a href="#" class="btn primary" data-modal="modal-demo" data-call-before="functionName">Modal Demo</a>
<!-- After Open Modal from Button -->
<a href="#" class="btn primary" data-modal="modal-demo" data-call-after="functionName">Modal Demo</a>

<!-- Before Open Modal from Modal Box -->
<div class="modal-box" id="modal-demo" data-call-before="functionName">
    <!-- Container -->
    <div class="modal-content">...</div>
</div>

<!-- After Open Modal from Modal Box -->
<div class="modal-box" id="modal-demo" data-call-after="functionName">
    <!-- Container -->
    <div class="modal-content">...</div>
</div>

Call to Action Themes

Tornado Provide Pre Designed Modal Content For Call to Actions Content You Can See The Examples Below.

Rating CTA Example
<!-- Modal Box -->
<div class="modal-box cta-modal" id="cta-rating">
    <!-- Container -->
    <div class="modal-content">
        <!-- Close button -->
        <a href="#" class="close-modal ti-close-round"></a>
        <!-- Content -->
        <i class="large-icon ti-star warning-color"></i>
        <h3>Rating Modal Concept</h3>
        <p>The most well-known placeholder text in history is called lorem ipsum You’ll find a version you can copy and paste below in HTML and plain text.</p>
        <div class="rating-stars">
            <span class="ti-star active"></span>
            <span class="ti-star active"></span>
            <span class="ti-star active"></span>
            <span class="ti-star active"></span>
            <span class="ti-star"></span>
        </div>
        <!-- Action Footer -->
        <div class="modal-footer">
            <a href="#" class="btn circle primary ti-checkmark-bold"></a>
            <a href="#" class="btn circle danger ti-close-round close-modal"></a>
        </div>
    </div>
    <!--// Container -->
</div>
<!-- // Modal Box -->

Sharing CTA Example
<!-- Modal Box -->
<div class="modal-box cta-modal" id="cta-share">
    <!-- Container -->
    <div class="modal-content">
        <!-- Close button -->
        <a href="#" class="close-modal ti-close-round"></a>
        <!-- Content -->
        <i class="large-icon ti-share primary-color"></i>
        <h3>Sharing Modal Concept</h3>
        <p>The most well-known placeholder text in history is called lorem ipsum You’ll find a version you can copy and paste below in HTML and plain text.</p>
        <div class="social-btns">
            <a href="#" class="btn circle large ti-facebook facebook-bg"></a>
            <a href="#" class="btn circle large ti-twitter twitter-bg"></a>
            <a href="#" class="btn circle large ti-google-plus google-plus-bg"></a>
            <a href="#" class="btn circle large ti-linkedin linkedin-bg"></a>
            <a href="#" class="btn circle large ti-instagram instagram-bg"></a>
            <a href="#" class="btn circle large ti-whatsapp whatsapp-bg"></a>
        </div>
    </div>
    <!--// Container -->
</div>
<!-- // Modal Box -->

NewsLetter CTA Example
<!-- Modal Box -->
<div class="modal-box cta-modal" id="cta-newsletter">
    <!-- Container -->
    <div class="modal-content">
        <!-- Close button -->
        <a href="#" class="close-modal ti-close-round"></a>
        <!-- Content -->
        <i class="large-icon ti-mail-sent primary-color"></i>
        <h3>Get Our Updates In Your Inbox!</h3>
        <p>The most well-known placeholder text in history is called lorem ipsum You’ll find a version you can copy and paste below in HTML and plain text.</p>
        <!-- Mail Form -->
        <form class="form-ui row no-gutter">
            <div class="col-8"> <input type="email" placeholder="Enter Your Email..."></div>
            <div class="col-4"> <input type="submit" value="Subscribe" class="btn primary block-lvl"></div>
        </form>
    </div>
    <!--// Container -->
</div>
<!-- // Modal Box -->

Colored Message Themes

beside the CTA Theme Above You Can use the modal for sending the user a message after or before some thing hapen by using the colored themes classes as you can see the example’s below and it support the main events colors dark | success | danger | warning | info.

Success Example
<!-- Modal Box -->
<div class="modal-box cta-modal success" id="modal-success">
    <!-- Container -->
    <div class="modal-content">
        <!-- Close button -->
        <a href="#" class="close-modal ti-close-round"></a>
        <!-- Content -->
        <i class="large-icon ti-checkmark-round"></i>
        <h3>Sucess Message Title</h3>
        <p>The most well-known placeholder text in history is called lorem ipsum You’ll find a version you can copy and paste below in HTML and plain text.</p>
        <!-- Footer -->
        <div class="modal-footer">
            <a href="#" class="btn rounded light col-5">Continue</a>
            <a href="#" class="btn rounded dark col-5 close-modal">Close Modal</a>
        </div>
    </div>
    <!--// Container -->
</div>
<!-- // Modal Box -->

Error Example
<!-- Modal Box -->
<div class="modal-box cta-modal danger" id="modal-error">
    <!-- Container -->
    <div class="modal-content">
        <!-- Close button -->
        <a href="#" class="close-modal ti-close-round"></a>
        <!-- Content -->
        <i class="large-icon ti-warning"></i>
        <h3>Error Message Title</h3>
        <p>The most well-known placeholder text in history is called lorem ipsum You’ll find a version you can copy and paste below in HTML and plain text.</p>
        <!-- Footer -->
        <div class="modal-footer">
            <a href="#" class="btn rounded light col-5">Continue</a>
            <a href="#" class="btn rounded dark col-5 close-modal">Close Modal</a>
        </div>
    </div>
    <!--// Container -->
</div>
<!-- // Modal Box -->

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.