JSFiddle - React, Tailwind, and code Playground

by houssamk

HTML

<a href="#" id="ctpnSearchLink">Advanced Search</a>
<div id="advancedSearchDialog" class="hidden">
    <fieldset>
        <legend>Advanced Search: Documents</legend>
        <fieldset>
            <legend>Search by Sender/Receiver Pair</legend>
        </fieldset>        
    </fieldset>
</div>

CSS

#advancedSearchDialog.hidden {
    display: none;
    visibility: hidden;
}

#advancedSearchDialog.unhidden {
    display: block;
    visibility: visible;
}

JavaScript

$(function(){
    $('#advancedSearchDialog').dialog({
            title: 'hi',
            draggable: true,
            resizable: true,
            closeOnEscape: true,
            dialogClass: 'CustomCortexDialog',
            
            autoOpen: false,
            width: 200,
            modal: true,
            bgiframe: true,
            overlay: {
                backgroundColor: 'black',
                opacity: 0.5
            }            
        });
    $('#ctpnSearchLink').click(function(){
        $('#advancedSearchDialog').dialog('open');
    })    
})