Tornado | Popup Modals

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 class's 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.

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.

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 to using it for user action response.

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 -->

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 Button -->
<a href="#" class="btn primary" data-modal="cta-rating">Rating CTA Example</a>

<!-- 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 class's as you can see the example's below and it support the main events colors dark | success | danger | warning | info.

Sucess Message Example


<!-- Modal Box -->
<div class="modal-box cta-modal success" id="modal-sucess">
    <!-- 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 Message 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 -->

Next Dropdowns Previous Accourdions