I'm trying to fix the multiple dialog box appearing issue, where upon pressing fn key, dialog box appears to get input from user.Whenever i press fn key,the dialog box appears even when one of same dialog box is already opened.Then user needs to press cancel multiple times to close this dialog box. So i need to prevent this multiple dialog box from appearing when it is already opened.Condition to open dialog box is written in Js
You have not described specific dialog box you use, so I created a sample one and demonstrated the solution. What you should do it to implement a singleton design pattern, and Here is a sample Code I wrote in codepen. JS:
class singleModal{
static isOpen=false;
static id='dialog';
static openModal(){
if(!singleModal.isOpen) {
console.log("modal opened!")
singleModal.isOpen = true;
document.getElementById(singleModal.id).style.display='block';
}
}
static closeModal(){
if(singleModal.isOpen) {
console.log("modal closed!")
singleModal.isOpen = false;
document.getElementById(singleModal.id).style.display='none';
}
}
}
singleModal.id = 'myDialog';
function openModal(){
singleModal.openModal();
}
function closeModal(){
singleModal.closeModal();
}
HTML:
<div class="dialog" id="myDialog">
Dialog
</div>
<button onclick="openModal()">open</button>
<button onclick="closeModal()">close</button>