POPUP MODALS

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

POPUPS INITIALIZE

Tornado has Typescript Method to Activate Popup Modals functionality you can call out the method like this Tornado.popup(selector); and the selector must represent the Popup Modal Wrapper class name then you can define the options that you want your Popup to preform.

//=====> Import Tornado UI Methods <=====//
import Tornado from './Base/Tornado';

//=====> Popup Usage <=====//
Tornado.popup('.modal-box', {..options..});

MODAL MARKUP

the Popup works on specific HTML markup structure and its build to be like this a trigger button with data attribute data-modal and the modal box id as value then the modal wrapper with class name modal-box and id to call it out inside the modal box you need content wrapper with class name modal-content what comes inside the content wrapper is totally up to you and look at themes down below if you need a ready to use examples.

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

POPUP OPTIONS

this a list of the popup options and methods that you can use to configure and manipulate your Popups and keep in your mind that any call back function must pass trigger argument and popup argument to do stuff to them.

//====> Activate Popups <====//
Tornado.popup('.modal-box', {
    hashOpen : true,  //===> Activate Popup by URL Hash [true || false]
    onHide   : (trigger,popup) => {  }, //===> When Popup Hide Call Back Function
    onShow   : (trigger,popup) => {  }, //===> When Popup Shows Call Back Function
});

POPUP CALLBACK METHODS

this an example of how to use the callback functions any call back function must pass trigger element argument and popup element argument to do stuff to them.

//====> Method Usage <====//
Tornado.popup('.modal-box', {
    //===> When Popup Shows Call Back Function
    onShow : (trigger,popup) => {
       //===> Alert me When Popup Shows with its Class List <===//
       alert(popup.classList);

       //===> Alert me When Popup Show with Trigger Button Text <===//
       alert(trigger.textContent);
    }, 
});

RATING DEMO THEME

<!-- 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-control">
            <input type="number" />
        </div>
        <!-- Action Footer -->
        <div class="modal-footer">
            <a href="#" class="btn circle primary ti-checkmark"></a>
            <a href="#" class="btn circle danger ti-close-round close-modal"></a>
        </div>
    </div>
    <!--// Container -->
</div>
<!-- // Modal Box -->

SHARE DEMO THEME

<!-- 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 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 DEMO THEME

<!-- 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 form-group">
            <input type="email" placeholder="Enter Your Email..." class="col-8" />
            <input type="submit" value="Subscribe" class="btn primary col-4" />
        </form>
    </div>
    <!--// Container -->
</div>
<!-- // Modal Box -->