JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<link rel="stylesheet" href="http://defunkt.github.com/facebox/facebox.css">
       <div id="addFriend" style="display: none;">
                <div style="float:right; font-size: 14px;">Add <strong>Name</strong> as friend </div>
                <div class="clearfloat"></div>

<form id="FriendRequest" action="javascript:DoFriendRequest(12, 12)" method="post">

                <table align="center" width="auto" border="0" cellpadding="5" cellspacing="5" style="margin: auto;">
                <tr>
                <td style="padding: 10px;" align="center">
                Comment: </td><td>
                <span class="field">

                <input name="commentFriend" type="text" id="commentFriend" style="height: auto;"value="" size="22"> 
                </span>
                </td></tr><tr>
                <td style="padding: 10px;"  align="center">
                Message:
                </td><td> 
                <span class="field">

                <input name="messageFriend" type="text" id="messageFriend" value="" size="22">
                </span>
                </td>
                </tr>
                <tr>
                <td colspan="2" style="margin: auto; text-align: center;">
                <input name="submit" type="submit" id="submit" value="Send request">
                </td>
                </tr>

                <tr>
                                <td colspan="2" style="margin: auto; text-align: center;">
                </td>
                </tr>
                </table>
                </form>

                <div style="margin: auto; text-align: center; font-size: 16px; font-weight: bold;" id="insert_svar"></div>
    </div>

JavaScript

(function($) {
  $.facebox = function(data, klass) {
    $.facebox.loading()

    if (data.ajax) fillFaceboxFromAjax(data.ajax)
    else if (data.image) fillFaceboxFromImage(data.image)
    else if (data.div) fillFaceboxFromHref(data.div)
    else if ($.isFunction(data)) data.call($)
    else $.facebox.reveal(data, klass)
  }

  /*
   * Public, $.facebox methods
   */

  $.extend($.facebox, {
    settings: {
      opacity      : 0,
      overlay      : true,
      loadingImage : 'images/loading.gif',
      closeImage   : 'images/closelabel.png',
      imageTypes   : [ 'png', 'jpg', 'jpeg', 'gif' ],
      faceboxHtml  : '\
    <div id="facebox" style="display:none;"> \
      <div class="popup"> \
        <table> \
          <tbody> \
            <tr> \
              <td class="tl"/><td class="b"/><td class="tr"/> \
            </tr> \
            <tr> \
              <td class="b"/> \
              <td class="body"> \
                <div class="content"> \
                </div> \
                <div class="footer"> \
                  <a href="#" class="close"> \
                    <img src="/facebox/closelabel.gif" title="close" class="close_image" /> \
                  </a> \
                </div> \
              </td> \
              <td class="b"/> \
            </tr> \
            <tr> \
              <td class="bl"/><td class="b"/><td class="br"/> \
            </tr> \
          </tbody> \
        </table> \
      </div> \
    </div>'
    },

    loading: function() {
      init()
      if ($('#facebox .loading').length == 1) return true
      showOverlay()

      $('#facebox .content').empty()
      $('#facebox .body').children().hide().end().
        append('<div class="loading"><img src="'+$.facebox.settings.loadingImage+'"/></div>')

      $('#facebox').css({
        top:    getPageScroll()[1] + (getPageHeight() / 10),
        left:   385.5
      }).show()

      $(document).bind('keydown.facebox', function(e) {
        if (e.keyCode == 27)...