Hacer un Modal (popup)

1. añadir este HTML:

<div id="openModal" class="item dropbtn pink"><?=$L["lang"]?> <i class="fas fa-caret-down"></i></div>
<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content" style="text-align:center;line-height: 2.2rem;padding-bottom: 60px;">
    <span class="close">&times;</span>
        <h2>Choose Your Language</h2>
            <div style="display:flex;justify-content: center;gap: 24px;">
                <div><a href="<?=$root?>" class="<?=(!isset($_GET["lang"])) ? "selected" : ""?>">English</a></div>
                <div><a href="<?=$root?>/es/" class="<?=($_GET["lang"] == "es") ? "selected" : ""?>">Español</a></div>
                <div><a href="<?=$root?>/fr/" class="<?=($_GET["lang"] == "fr") ? "selected" : ""?>">Français</a></div>
            </div>
  </div>
</div>

2. añadir el JavaScript, después del modal:

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("openModal");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

</script>

3. añadir el CSS:

.modal-content a {
    text-decoration: none;
    color: #333;
    padding: 10px 18px
}
/* The Modal (background) */
        .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #eee;
    float: right;
    line-height: 28px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    background: #333;
    border-radius: 30px;
    width: 30px;
    height: 30px;
}

.close:hover,
.close:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}
.selected {
    background: #eee;
    border-radius: 8px;
}

.modal-content a:hover {
    --opacity: 1;
    background: rgb(255 36 125 / var(--opacity));
    border-radius: 8px;
    color: #fff;
}