JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<a href="#myModal" id="myOpener">Open modal</a>
<div id="myModal" class="modal">
    <div>
        <div>
            <a href="#myOpener">Close</a>
        </div>
    </div>
    <a href="#myOpener">Close</a>
</div>

<div id="dropdown" class="dr-dropdown-list">
    <a href="#">Vælg region</a>
    <a href="#dropdown">Vælg region</a>
    <ul>
        <li><a href="/">Bornholm</a></li> 
        <li><a href="/">Esbjerg</a></li>  
        <li><a href="/">Fyn</a></li> 
        <li><a href="/">København</a></li> 
        <li><a href="/">Midt &amp; vest</a></li> 
        <li><a href="/">Nordjylland</a></li>      
        <li><a href="/">Nordvestsjælland</a></li>       
        <li><a href="/">Sjælland</a></li>            
        <li><a href="/">Syd</a></li>           
        <li><a href="/">Trekanten</a></li>           
        <li><a href="/">Østjylland</a></li>  
    </ul>
</div>

CSS

.modal {
    position: absolute;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #CCC;
    background-color: rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: none;
}
.modal:target {
    display: block;
}
.modal:before {
    content: "";            
    display: block;
    float: left;
    width: 100%;
    height: 50%;
}
.modal > div {
    width: 100%;            
    float: left;
    position: relative;
    z-index: 1;
}
.modal > div > div {
    margin-top: -50%;
    width: 300px;
    margin: 0 auto;
    background-color: #FFF;
}

.modal > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
    display: block; 
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 0;
}


.dr-dropdown-list > ul {
    display: none;
    overflow: hidden; 
}

.dr-dropdown-list:target ul {
    display: block;
}
.dr-dropdown-list:target > a:first-child,
.dr-dropdown-list > a + a {
    display: inline;
}
.dr-dropdown-list > a:first-child,
.dr-dropdown-list:target > a + a {
    display: none;
}

JavaScript

(function () {

    Element.NativeEvents.hashchange = 1;
    
    var hash,
        modalTargetSupport = function () {
            var id = location.hash ? location.hash.replace(/^#/, "") : "",
                element = document.id(id);       
            if (element && element.hasClass("modal")) {
                if (element.getStyle("display") !== "block") {
                    element.setStyle("display", "block");
                }
                else {
                    window.removeEvent("hashchange", modalTargetSupport);
                }    
            }
            if (hash) {
                element = document.id(hash);
                if (element && element.hasClass("modal")) {
                    if (element.getStyle("display") === "block") {
                        element.setStyle("display", "none");
                    }
                }
            }
            hash = id;
        };
    
    window.addEvent("hashchange", modalTargetSupport);

} ());