I have a container that is opened by a button (I have made it toggle so can close when re-clicking on the button using a bool variable (AreaContainerDialogOpen). The problem I have is the container has a window closing symbol: X top right which of course doesn't interact with the AreaContainerDialogOpen variable so clicking on the button doesn't always work as it has to turn off before it can turn back on so need to click twice if the X has been used to close. My question is: is there a way to get the X close action and set AreaContainerDialogOpen=false (preferred solution) ? Or can I remove the X closing symbol?

The container

   <div id="AreaContainer" class="container-fluid scrollBox fluidCentrePosition" style="display:none" title="Area">

The Button

 <button id="selectPRDAreas" class="btn btn-outline-dark" onclick="selectPRDAreas()">PRD Areas</button>


function selectPRDAreas()
{
            if (AreaContainerDialogOpen == false) {
                console.log("Opening AreaContainer");
                $("#AreaContainer").show(); 
                $("#AreaContainer").dialog();
                AreaContainerDialogOpen = true;
                //do stuff
    }
            else if (AreaContainerDialogOpen == true) {            
                $("#AreaContainer").dialog("close");
                AreaContainerDialogOpen = false;
            }
}

Thanks for your help, fairly new to javascript.