JSFiddle - React, Tailwind, and code Playground

by Sam Tyson

HTML

<script src="http://malsup.github.com/jquery.blockUI.js"></script>
<div id="register_win" class="modal">
    <h3>Register</h3>
    <div class="modal_close">
    <img src="http://cdn-sg1.pgimgs.com/images/pg/close-button.png" id="register_close" >
    </div>
</div>

<button id="register">Register</button>

CSS

.modal {
    display: none;
    padding: 10px;
    cursor: default;
}
.modal_header {
    font-family: Verdana, Geneva, sans-serif;
    float: left;
}
.modal_close {
    cursor: pointer;
    float: left;
}

JavaScript

function addBlockUI(element) {
   $(element).click(function () {
       $.blockUI({
           message: $(element+'_win'),
           css: {
               width: '500px'
           }
       });
   });

   $(element+'_close').click(function () {
       $.unblockUI();
       return false;
   });
}

addBlockUI("#register");