Tengo un contenedor que se abre con un botón (lo hice alternar para que pueda cerrarse al volver a hacer clic en el botón usando una variable bool (AreaContainerDialogOpen). El problema que tengo es que el contenedor tiene un símbolo de cierre de ventana: X arriba a la derecha que, por supuesto, no interactúa con la variable AreaContainerDialogOpen, por lo que hacer clic en el botón no siempre funciona, ya que debe apagarse antes de poder volver a encenderse, por lo que debe hacer clic dos veces si la X se ha usado para cerrar. Mi pregunta es : ¿hay alguna manera de obtener la acción de cierre X y establecer AreaContainerDialogOpen=false (solución preferida)? ¿O puedo eliminar el símbolo de cierre X?

El contenedor

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

El botón

 <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; } }

Gracias por su ayuda, bastante nuevo en javascript.