JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
<div  id="open">
    <a href="javascript:void();" onclick="openModal('test');">Open Modal 1</a>
</div>
<div id="test" class="modal">
    <h2>Test Modal 1</h2>
    This is the first modal dialog. Close it, or open dialog the second dialog.
    <br /><br />
    <button onclick="closeModal();">Close Modal</button>
    <button onclick="openModal('test2');">Open Test2</button>
</div>

<div id="test2" class="modal">
    <h2>Test Modal 2</h2>
    <img src="http://flowplayer.org/tools/img/github-logo.png" />
    <br /><br />
    <button onclick="closeModal();">Close Modal</button>
</div>

CSS

body{background:#000;      font-family:calibri, hevetica, verdana, arial;}
a, a:active, a:visited{color:#ff0;}
a:hover{color:#f00;}
.modal {
    z-index:999;
    background-color:#fff;
    display:none;
    width:350px;
    padding:15px;

    text-align:left;
    border:4px solid #666;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    -moz-box-shadow: 0 0 50px #000;
    -webkit-box-shadow: 0 0 50px #000;
    position:fixed;
    _position:absolute;
    margin:10px;
}

.modal h2 {
  margin:0px;
  padding:10px 0 10px 0px;
  border-bottom:1px solid #333;
  font-size:20px;
  color:#900;
  font-weight:bold;
  text-align:left;
  width:330;
}

#open{
    width:auto;
    position:absolute;
    -moz-box-shadow: 0 0 10px #000;
    -webkit-box-shadow: 0 0 10px #000;    
}

JavaScript

var currentModal;

function openModal(divName){
    closeModal();
    if ($('#' + divName).length>0){
        currentModal=$('#'+divName).overlay({
            mask: {color: '#000000'},    
            top:'0px',
            api: false        
        }).load();
    }
    $('#openButton').attr('disabled','disabled');
}    
function closeModal(){
    if (currentModal){
        if (currentModal.isOpened){
            currentModal.close();
        }
    }
    $('#openButton').removeAttr('disabled');
}