當模式框在前面時，如何使其他表單元素可點擊？

Question

當我關注此字段時，將出現一個模式框。 每當我在其他地方單擊時，它都會進行。

我無法雙擊以顯示過去的值，因為在雙擊時，模式框首先出現然后消失，即第二次單擊未注冊為單擊文本字段。 如何雙擊以打開過去值列表而不關閉模式框？

 function edifactTagsInfo() { document.getElementById('myModal').style.display = "block"; } function blurEdifactTagsInfo() { document.getElementById('myModal').style.display = "none"; } 

 .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 0; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: red; /* Fallback color */ background-color: rgba(0, 0, 0, 0); /* Black w/ opacity */ opacity: 0.9; filter: alpha(opacity=90); } /* Modal Content */ .modal-content { background-color: #fff; margin: auto; padding: 25px; border: 5px solid #0eaadc; width: 50%; font-family: Amadeus_Font, sans-serif; font-weight: bold; font-style: normal; font-size: 20px; color: #0c65ba; } 

 <input type="text" id="edifactTagsField" onfocus="edifactTagsInfo()" onblur="blurEdifactTagsInfo()"> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close"></span> <p>TEXT</p> </div> </div> 

Answer 1

嘗試這個：

 function edifactTagsInfo() { document.getElementById('myModal').style.display = "block"; } document.getElementById('edifactTagsField').parentElement.addEventListener('click',function() { document.getElementById('myModal').style.display = "none"; }); 

 .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 0; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: red; /* Fallback color */ background-color: rgba(0, 0, 0, 0); /* Black w/ opacity */ opacity: 0.9; filter: alpha(opacity=90); } /* Modal Content */ .modal-content { background-color: #fff; margin: auto; padding: 25px; border: 5px solid #0eaadc; width: 50%; font-family: Amadeus_Font, sans-serif; font-weight: bold; font-style: normal; font-size: 20px; color: #0c65ba; } 

 <input type="text" id="edifactTagsField" onfocus="edifactTagsInfo()"> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close"></span> <p>TEXT</p> </div> </div> 

我要做的就是刪除隱藏edifactTagsField的模式onBlur事件， 並向edifactTagsField的父級添加onClick偵聽器以隱藏模式；