JSFiddle - React, Tailwind, and code Playground

by Elvin Asadov

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Modal -->
<div class="modal fade" id="pleaseWaitDialog" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1>Processing...</h1>
      </div>
      <div class="modal-body">
        <div class="progress">
          <div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 100%">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

$(function() {
  var pleaseWaitModal = $('#pleaseWaitDialog');

  pleaseWaitModal.modal({
    backdrop: 'static',
    keyboard: false
  });

  showPleaseWait = function() {
    pleaseWaitModal.modal('show');
  };

  hidePleaseWait = function() {
    pleaseWaitModal.modal('hide');
  };



  showPleaseWait();
});