如何通過單擊屏幕上的任意位置來關閉模態彈出表單

Question

我創建了兩個模態彈出表單...一個表單是登錄，另一個是注冊。

任何時候只能打開一個表單，如果用戶單擊表單外的任何地方，我試圖將它們關閉。 我可以關閉其中一個，但不能關閉另一個。

我已經展示了它所鏈接的代碼。 請點擊以下鏈接。 該鏈接確實有一些錯誤，但您應該明白。 表單 id 之一是“id01”，其他表單 id 是“id02” 有沒有人有任何想法？

一旦在鏈接上，請選擇如果您有帳戶，請單擊此處或如果您還沒有帳戶，請單擊此處以獲取表格

https://jsfiddle.net/z6atq0ww/

它鏈接到的代碼是

var modal = document.getElementById('id02');

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

    }
}
</script>

謝謝

Answer 1

您應該制作一個覆蓋整個頁面的透明模態背景。 在該位置之上放置您顯示的表單。 然后你可以簡單地向模態背景添加一個點擊處理程序。

Answer 2

嘗試使用 jquery

$('.click-btn').click(function(){
       $('.modal').show(); //show popup
    })

    $('body').click(function(){
       $('.modal').hide(); //hide modal
    })

    $('.click-btn, .modal').click(function(e){
       e.stopPropagation; // don't close modal by clicking inside modal and by clicking btn
    })