JSFiddle - React, Tailwind, and code Playground

by NinjaSk8ter

HTML

<script src="http://www.virtualpetstore.com/js/jquery.simplemodal.js"></script>
<html>
    <head></head>
    <body>
        <form>
            <div id="Soluciones_derecho2">
                <div class="contactanos">
                    <div id="contact-button">
                        <div id='contact-form'>
              <a class="consultcontacto" href="#"></a>                        
                        </div>
                    </div>
                </div>
            </div>
        </form>

<div id='modal-contact-form' style='display: none'>
    <div class='contact-top'>
    </div>
    <div class='contact-content'>
        <h1 class='contact-title'>Crea Su Nuevo Ticket:</h1>
        <div class='contact-loading' style='display: none'>
        </div>
        <div class='contact-message' style='display: none'>
        </div>
        <form action='ModalContact1.aspx' style='display: none'>
            <label for='contact-name'>
                *Name:</label>
            <input type='text' id='contact-name' class='contact-input' name='name' tabindex='1001' />
            <label for='contact-email'>
                *Email:</label>
            <input type='text' id='contact-email' class='contact-input' name='email' tabindex='1002' />
            <label for='contact-subject'>
                Subject:</label>
            <input type='text' id='contact-subject' class='contact-input' name='subject' value=''
                tabindex='1003' />
            <label for='contact-message'>
                *Message:</label>
            <textarea id='contact-message' class='contact-input' name='message' cols='40' rows='4'
                tabindex='1004'></textarea>
            <br />
            <label>&nbsp;</label>
            <input type='checkbox' id='contact-cc' name='cc' value='1' tabindex='1005' />
            <%--<span class='contact-cc'>Send me a copy</span>--%>
            
            <br style="clear:both; line-height:0px;" />
            <label>&nbsp;</label>
...

CSS

#Soluciones_derecho2 {
    float: left;
    position: relative;
    /*background-color: Purple;*/
    width: 230px;
    /*height: 536px;*/
}
#Soluciones_derecho2 .contactanos {
    width: 230px;
    height: 219px;
    background-color: olive;
}

#contact-button {
    height: 40px;
    width: 220px;
    float: left;
    position:relative;
    margin: 7px 0 0 5px;
}
a.consultcontacto { 
    height: 40px; 
    width: 220px;
    background-image: url("http://www.virtualpetstore.com/Images/Home/consultbuton3.png"); 
    background-position:left bottom; /* 0px -27px; */ 
    display: block;
    font-size: 11px;
    text-align: center;
}

a.consultcontacto:hover { 
    /*background-position:left top; /*0px 0px;*/
}

/* contact.css */
/*
 * SimpleModal Contact Form
 * http://www.ericmmartin.com/projects/simplemodal/
 * http://code.google.com/p/simplemodal/
 *
 * Copyright (c) 2010 Eric Martin - http://ericmmartin.com
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Revision: $Id: contact.css 254 2010-07-23 05:14:44Z emartin24 $
 */

#contact-overlay {                          /* Overlay */
    background-color:#000;
    /*background-color: Green;*/
    cursor:wait;
}

#contact-container {                        /* contact-container is the containerId defined in contact.js */
    font-family: Arial;
    font-size: 12px;
    line-height: 18px;                      /* Height of space above and below all Text ie Labels */
    text-align:left; 
    /*width:425px;*/                        /* Modal Width */ /* Modal Height within contact.js */
    width: 350px;
}
#contact-container .contact-content {       /* contact-content is the class defined within class modal-contact-form within Site1.Master */ 
    background-color: yellow;
    /*background-color: #8C8C8C;*/
    color:#666666;
    height: 40px;                           /* height from point where modal rolls down */
}
#contact-container form {
    margin: 0 0 0 0;        ...

JavaScript

/*
* SimpleModal Contact Form
* http://www.ericmmartin.com/projects/simplemodal/
* http://code.google.com/p/simplemodal/
*
* Copyright (c) 2010 Eric Martin - http://ericmmartin.com
*
* Licensed under the MIT license:
*   http://www.opensource.org/licenses/mit-license.php
*
* Revision: $Id: contact.js 254 2010-07-23 05:14:44Z emartin24 $
*/

jQuery(function ($) {
    var contact = {
        message: null,
        init: function () {
            $('#contact-form input.consultcontacto, a.consultcontacto').click(function (e) {
                e.preventDefault();

                // Create the Modal dialog with the data
                
                $('#modal-contact-form').modal({
                    closeHTML: "<a href='#' title='Close' class='modal-close'>Cierra Ticket Modal</a>",
                    maxHeight: 62,
                    maxWidth: 62,
                    minHeight: 62,
                    minWidth: 62,
                    position: [50, 50],
                    overlayId: 'contact-overlay',
                    containerId: 'contact-container',
                    onOpen: contact.open,
                    onShow: contact.show,
                    onClose: contact.close
                    
                    //onOpen: consultcontacto.open,
                    //onShow: consultcontacto.show,
                    //onClose: consultcontacto.close
                });
            });
        },
        open: function (dialog) {
            // add padding to the buttons in firefox/mozilla
            if ($.browser.mozilla) {
                $('#contact-container .contact-button').css({
                    'padding-bottom': '2px'
                });
            }
            // input field font size
            if ($.browser.safari) {
                $('#contact-container .contact-input').css({
                    'font-size': '.9em'
                });
            }

            // Dynamically determine Modal Height
            
            //var h =...