JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="http://malsup.github.com/jquery.blockUI.js"></script>
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>

<p>Full name: <strong data-bind="text: fullName"></strong></p>

<button data-bind="click: openDialog">Open Dialog</button>

<div id="MyDlg" style="display: none;">
    Hello <span data-bind="text: fullName"></span>
</div>

JavaScript

function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");

    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();    
    }, this);
    
    this.openDialog= function() {
        $.blockUI({ message: $dlg }); 
        $('.blockOverlay').attr('title','Click to unblock').click($.unblockUI);
    };    
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

$(function() {
    // We use our own reusable dialog style that requires that the content be wrapped like this...
    $dlg = $('<div></div>');
    $(document).append($dlg);
    $('#MyDlg').show();
    $dlg.append($('#MyDlg'));
});