JSFiddle - React, Tailwind, and code Playground

by leongaban

HTML

<script src="http://whoat.net/assets/scripts/libs/popeasy/jquery.modal-min.js"></script>
<body id="body-dashboard">
    
<div id="modal-vcard" class="modal-vcard">
    <table>
        <tr>
            <td colspan="2">
                <div id="vcard_profile_display">
                    <div class="vcard_profile_pic">
                        <img src="/assets/img/dashboard/default_avatar.png" alt="Default Avatar"/>
                    </div>
                    <ul>
                        <li class="username"></li>
                        <li class="title"></li>
                        <li class="company"></li>
                    </ul>
                    <div class="closeBtn"></div>
                </div>
            </td>
        </tr>

        <tbody id="vcard-data">
            <tr>
                <td class="vcard-type">Email <img src="/assets/img/dashboard/icon_blue_email.png" alt="Email"/></td>
                <td class="vcard-meta" id="vcard-email"></td>
            </tr>
        </tbody>
    </table>

    <!-- Extra -->
    <div id="modal-request-extra">
        <form action="" id="intro-request-form" method="post">
            <section id="intro-request-options">
                <div id="modal-request-header">
                    Target
                </div>
                <div id="target-info">
                    <ul>
                        <li id="request-target-name">Rebecca Wilson</li>
                        <li id="request-target-co">Briggs Freeman Sotheby’s International Realty</li>
                    </ul>
                </div>
                <hr>
            </section>
            <section id="intro-request-message">
                <h1>Message</h1>
                    <div id="the-request-textarea">
                        <textarea name="comments" cols="25" rows="5"></textarea>
                    </div>

                    <div id='modal-request-button'>
                        <a href="" class="closeBtn">Cancel</a>
                ...

CSS

body {
    font-family: Arial, sans-serif;
    background: #ccc;
}
.overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
}
.modal-vcard {
    display:none;
    background:blue;
}

#modal-request-extra {
    display:none;
    background:yellow;
}

JavaScript

$(document).ready(function(){

    $('#body-dashboard').modal({
        trigger: '.vcard-link',          // id or class of link or button to trigger modal
        olay:'div.overlay',             // id or class of overlay
        modals:'div.modal-vcard',             // id or class of modal
        animationEffect: 'fadeIn',   // overlay effect | slideDown or fadeIn | default=fadeIn
        animationSpeed: 400,            // speed of overlay in milliseconds | default=400
        moveModalSpeed: 'slow',         // speed of modal movement when window is resized | slow or fast | default=false
        background: 'a2d3cd',           // hexidecimal color code - DONT USE #
        opacity: 0.7,                   // opacity of modal |  0 - 1 | default = 0.8
        openOnLoad: false,              // open modal on page load | true or false | default=false
        docClose: true,                 // click document to close | true or false | default=true    
        closeByEscape: true,            // close modal by escape key | true or false | default=true
        moveOnScroll: true,             // move modal when window is scrolled | true or false | default=false
        resizeWindow: true,             // move modal when window is resized | true or false | default=false
        close:'.closeBtn'               // id or class of close button
    });
    
    $('#vcard-combo').unbind('click').bind('click', function () {
        $('#modal-request-extra').show();
        console.log('show extra modal');
    });
});

/*
var initVCardModal = function() {
    var modalObj = $('#body-dashboard');
    if (modalObj.length && modalObj.modal) {
        modalObj.modal({
            trigger: '.vcard-link',
            olay:'div.overlay',
            modals:'div.modal-vcard',
            animationEffect: 'fadeIn',
            animationSpeed: 400,
            moveModalSpeed: 'slow',
            background: '000',
            opacity: 0.8,
            openOnLoad: false,
            docClose:...