JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<div id="modal-upload" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<div class="modal-header">
<h3>Upload File</h3>
</div>
<div class="modal-body">
<div id="page-upload-1">
<form>
<label>File:</label>
<input type="file"></input>
<label>Comment:</label>
<input type="text" class="pageselector" placeholder="Describe your file"
></input>
</form>
</div>
<div id="page-upload-2" class="hide">
<h4>Uploading...</h4>
<div class="progress progress-striped active">
<div class="bar" style="width: 0%;"></div>
</div>
</div>
</div>
<div class="modal-footer"> <a href="#" class="btn">Cancel</a>
<a href="#" class="btn btn-primary">Upload</a>
</div>
</div>
JavaScript
$(function () {
$('#modal-upload').modal('show');
});