JSFiddle - React, Tailwind, and code Playground

by ddelerme_18f

HTML

<script src="//cdn1.1800flowers.com/wcsstore/RAPIDStorefrontAssetStore/ww54/AJAXUserInterface/javascript/jquery-1.7.2.js"></script>
<script src="//cdn1.1800flowers.com/wcsstore/RAPIDStorefrontAssetStore/ww54/AJAXUserInterface/javascript/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//cdn1.1800flowers.com/wcsstore/Flowers/ww45/css/flowers-mbp.css">
<link rel="stylesheet" href="//cdn1.1800flowers.com/wcsstore/Flowers/ww45/css/flowers-ext-mbp.css">

    <button id="open_modal">open modal</button>
    <div id="mod_window" class="mod-modal" role="dialog" aria-label="Modify My Order"">
            <div id="espot_modifyMyOrder_header">
                <!-- EXAMPLE MARKETING CONTENT -->
                <p class="mod-title">Modify My Order <a class="mod-close" href="javascript:closeModal()">close</a></p>

            </div>
            <div id="mod_ajaxContent">
                <form name="modifyOrder" method="post" id="mod_order">

                    <!-- START: Place required hidden inputs here -->
                    <input type="hidden" id="" name="" value="">
                    <!-- END: Place required hidden inputs here -->

                    <div id="mod-accordion">

                      <span class="mod-item-hdr mod-item-hdr-1">Add or Update Card Message</span>
                        <div class="mod-item-body">
                            <textarea name="textarea" rows="10" cols="50">Write something here</textarea>
                            <span class="mod-character-count">Maximum Characters:<span id="mod_character_count">200</span></span>
                        </div>

                      <span class="mod-item-hdr">Update Recipient Address</span>
                        <div class="mod-item-body">

                            <div class="mod-row mod-input">
                                <label id="" for=""><span class="AA-red">*</span>First name:</label>
                                <input type="text" name="firstName" tabindex=""...

CSS

/*----------------------------------------------------------------*/
/* ----------------------------------------------   Modify Order  */
/*----------------------------------------------------------------*/

.mod-title {
    width: 100%;
    font-size: 16px;
    color: #fff;
    text-indent: 10px;
    background:#593084;
    margin: 0;
    padding:10px 0;
    font-weight: bold;

}
#mod_window {
    display: none;
    width: 480px;
    min-height:550px; 
    background: #fff;
    position: fixed;
    top: 10%;
    left: 50%;
    margin-left: -200px;
    -webkit-box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.75);
    z-index: 9999;
}
.ie8 #mod_window {border:solid 1px #ccc;}

.mod-item-hdr {
    display: block;
    width: 90%;
    height: 40px;
    border: 0;
    color: #593084;
    font-size: 14px;
    font-weight: bold;
    text-indent: 10px;
    line-height: 38px;
    margin: 0 auto;
    border-top: solid 1px #ccc;
}
.mod-close {
    float: right;
    color: #fff;
    font-size: 10px;
    margin-right: 13px;
    margin-top: -5px;
    text-decoration: none;
}
.mod-close:before {
    content: "X";
    font-size: 14px;
    display: block;
    color: #fff;
    text-align: center;
    margin-right: 16px;
}
.mod-item-hdr-1 {
    border-top: 0;
    }
.mod-item-hdr:focus {
    outline: 0;
}
/*plus minus icon*/
.ui-icon,
.ui-state-default .ui-icon,
.ui-state-hover .ui-icon, 
.ui-state-focus .ui-icon {
    width: 26px;
    height: 26px;
    background:...

JavaScript

// I have added this logic for prototyping purposes only not needed for final product but 
// the same end result should apply.  classes and ids should remain the same.  

// just to test fade in modal and accordion
$('#open_modal').click( function(){
    $('#mod_window').fadeIn(500);
    $("#mod-accordion" ).accordion();
})

var submit = document.querySelector('.mod-submit');
var modalCont = document.getElementById('mod_window');
var modalSucc = document.getElementById('modal_success');


var clickSubmit = function(){
    modalSucc.className = "display-none"
    var loaderImg = document.createElement('img');
        loaderImg.src += '//cdn1.1800flowers.com/wcsstore/RAPIDStorefrontAssetStore/images/ajax-loader-large-wh.gif';
    var loader = document.createElement('div');
        loader.className += 'modal-ajax-load';
        loader.appendChild(loaderImg);
        modalCont.appendChild(loader);
    // fade in loading screen    
    setTimeout(function () {
        loader.className += ' modal-fade';
        modalCont.className += ' mod-height';
    }, 100);
    // evaluate height of success message   
    setTimeout(function () {           
        modalSucc.className = "";
        var modHeight = document.getElementById('modal_success').offsetHeight;
        var modHdrHeight = document.querySelector('.mod-title').offsetHeight;
        modalCont.style.minHeight = (modHeight+modHdrHeight)+"px";
        modalCont.style.maxHeight = (modHeight+modHdrHeight)+"px"; 
        document.getElementById('modal_success').style.bottom = 0;  
    }, 4500); 
    // fade out loading screen  
    setTimeout(function () {           
        loader.className = 'modal-ajax-load';
    }, 5000);
    // remove loading screen 
    setTimeout(function () {
        loader.remove()
    }, 5100);
};
// IE8 compatability
if (!submit.addEventListener) {
    submit.attachEvent("onclick", clickSubmit);
}
else {
    submit.addEventListener("click", clickSubmit, false);
}