JSFiddle - React, Tailwind, and code Playground

by Hui Zheng

HTML

<link rel="stylesheet" href="http://static.scripting.com/github/bootstrap2/css/bootstrap.css">
<script src="http://static.scripting.com/github/bootstrap2/js/jquery.js"></script>
<script src="http://static.scripting.com/github/bootstrap2/js/bootstrap-modal.js"></script>
    <body>
        <div class="divDemoBody">
            <h1>Bootstrap 2.0 Modal Demo</h1>
            <p>A simple demo of a <a href="http://twitter.github.com/bootstrap/javascript.html#modals">modal dialog</a> in Bootstrap 2.0.</p>
            <p>1. Click the button. 2. Enter a new title for the window. 3. Click OK.</p>
            <p>We set the title of the window and close the dialog.</p>
            <div class="modal hide fade" id="windowTitleDialog">
                <div class="modal-header">
                    <a href="#" class="close" data-dismiss="modal">&times;</a>
                    <h3>Please enter a new title for this window.</h3>
                    </div>
                <div class="modal-body">
                    <div class="divDialogElements">
                        <input class="xlarge" id="xlInput" name="xlInput" type="text" />
                        </div>
                    </div>
                <div class="modal-footer">
                    <a href="#" class="btn" onclick="closeDialog ();">Cancel</a>
                    <a href="#" class="btn btn-primary" onclick="okClicked ();">OK</a>
                    </div>
                </div>
            <div class="divButton">
                <a data-toggle="modal" href="#windowTitleDialog" class="btn btn-primary btn-large">Launch demo modal</a>
                </div>
            </div>
        </body>

CSS

body {
                width: 60%;
                margin-left: auto;
                margin-right: auto;
                margin-top: 100px;
                }
            .divDemoBody p {
                font-size: 18px;
                line-height: 140%;
                padding-top: 12px;
                }
            .divDialogElements input {
                font-size: 18px;
                padding: 3px; 
                height: 32px; 
                width: 500px; 
                }
            .divButton {
                padding-top: 12px;
                }

JavaScript

$(document).ready(function() {
                $('#windowTitleDialog').bind('show', function () {
                    document.getElementById ("xlInput").value = document.title;
                    });
                });
            function closeDialog () {
                $('#windowTitleDialog').modal('hide'); 
                };
            function okClicked () {
                alert('ok?');
                document.title = document.getElementById ("xlInput").value;
                closeDialog ();
                };