JSFiddle - React, Tailwind, and code Playground

by Bhupesh Kushwaha

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdn.ckeditor.com/4.5.7/standard/ckeditor.js"></script>
<button type="button" data-toggle="modal" data-target="#newhelpadd">
  Launch modal</button>

<!-- Modal -->
<div class="modal fade" tabindex="-1" id="newhelpadd" role="dialog">
  <div class="modal-dialog modal-lg">
    <!-- Modal content-->
    <div class="modal-content panel panel-default">
      <div class="modal-header panel-heading">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Add New Help</h4>
      </div>
      <form role="form" method="post" id="form-help-add">
        <div class="modal-body">
          <div class="panel-body">
            <div class="form-group">
              <label for="helpcode">Title</label>
              <input type="hidden" class="form-control" id="help_id" name="help_id" value="" />
              <input type="text" class="form-control" id="help_title" name="help_title" placeholder="Enter Title" value="" />
            </div>
            <div class="form-group">
              <label for="helpdesc">Short Description</label>
              <textarea id="help_sdesc" name="help_sdesc" class="form-control"></textarea>
            </div>
            <div class="form-group">
              <label for="helpdesc">Long Description</label>
              <textarea id="help_ldesc" name="help_ldesc" class="form-control" style="height: 600px"></textarea>
            </div>
            <div class="form-group">
              <input type="submit" id="help_btnsubmit" name="help_btnsubmit" class="btn btn-primary" value="Submit" />
              <button type="button" class="btn btn-danger" id="btn_resetgroup" data-dismiss="modal">Cancel</button>
            </div>
          </div>
        </div>
      </form>
    </div>
   ...

JavaScript

CKEDITOR.replace('help_ldesc');
//CKEDITOR.replace('help_ldesc1');

$.fn.modal.Constructor.prototype.enforceFocus = function() {
  var $modalElement = this.$element;
  $(document).on('focusin.modal', function(e) {
    var $parent = $(e.target.parentNode);
    if ($modalElement[0] !== e.target && !$modalElement.has(e.target).length && $(e.target).parentsUntil('*[role="dialog"]').length === 0) {
      $modalElement.focus();
    }
  });
};