JSFiddle - React, Tailwind, and code Playground

by Michel Plungjan

HTML

<script src="http://leanmodal.finelysliced.com.au/js/jquery.leanModal.min.js"></script>
<a href="#box" rel="popup">Popup</a>

<div id="box" class="popup">
    <a href="#another-box" rel="popup" id="another">Another box</a>
</div>

<div id="another-box" class="popup">
    <form>
        <select>
            <option id="o1">option 1</option>
            <option id="o2" selected>option 2</option>
        </select>
    </form>
</div>

CSS

#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #333;
    display: none;
}
.popup {
    display:none;
    background:#fff;
    width:200px;
}

JavaScript

$(function() {
    $('a[rel*=popup]').leanModal({ top : 200, closeButton: ".popup-close" });		
    $("#another").on("click",function() {
        updateSelected("o1", "box");
        return false;
    });
    
    
});			
function updateSelected(id, parentID) {
    $("#"+parentID).css("display","none");
    $("#"+id).prop("selected",true);
}