JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<button data-bind="click: showModal">Show</button>

<div class="modal hide fade" data-bind="showModal: displaySubmitModal()">
  <div class="modal-header">
    <button type="button" class="close" data-bind="click: closeSubmitModal"data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>TEST</h3>
  </div>
  <div class="modal-body">
    <form data-bind="submit: closeSubmitModal">
        <!-- editor for item here -->
    </form>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-bind="click: closeSubmitModal">Close</a>
  </div>
</div>

JavaScript

ko.bindingHandlers.showModal = {
        init: function (element, valueAccessor) {
            $(element).modal({ backdrop: 'static', keyboard: true, show: false });
        },
        update: function (element, valueAccessor) {
            
            var value = valueAccessor();
            if (ko.utils.unwrapObservable(value)) {
                 $(element).modal('show');
                $("input", element).focus();
            }
            else {
                
                $(element).modal('hide');
            }
        }
    };

var vm = {};
vm.displaySubmitModal = ko.observable(false);
vm.showModal = function(){ vm.displaySubmitModal(true); }
vm.closeSubmitModal = function(){ vm.displaySubmitModal(false); };

ko.applyBindings(vm);