外の他の場所をクリックしてモーダルを閉じる

Question

私はその外のどこかをクリックしてモーダルを閉じたいと思っていますが、機能を一緒にする方法はわかりません。理想的には、私は純粋なJSまたはAngularJSソリューションを持っていたいと思います。この問題についての助けがあれば幸いです。

Fiddle

.modalDialog { 
 
    position: fixed; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.8); 
 
    z-index: 99999; 
 
    opacity: 0; 
 
    transition: opacity 400ms ease-in; 
 
    pointer-events: none; 
 
} 
 

 
.modalDialog:target { 
 
    opacity: 1; 
 
    pointer-events: auto; 
 
} 
 

 
.modalDialog > div { 
 
    width: 400px; 
 
    position: relative; 
 
    margin: 10% auto; 
 
    padding: 5px 20px 13px 20px; 
 
    border-radius: 10px; 
 
    background: linear-gradient(#fff, #999); 
 
} 
 

 
.close { 
 
    background: #606061; 
 
    color: #fff; 
 
    line-height: 25px; 
 
    position: absolute; 
 
    right: -12px; 
 
    text-align: center; 
 
    top: -10px; 
 
    width: 24px; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    border-radius: 12px; 
 
    box-shadow: 1px 1px 3px #000; 
 
} 
 

 
.close:hover { 
 
    background: #00d9ff; 
 
}

<a href="#openModal">Open Modal</a> 
 
<div id="openModal" class="modalDialog"> 
 
    <div> 
 
    <a href="#close" title="Close" class="close">X</a> 
 
    <h2>Modal Box</h2> 
 
    <p>This is a sample modal box that can be created using the powers of CSS3.</p> 
 
    <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p> 
 
    </div> 
 
</div>

Answer 1

あなたは、内側モーダルコンテンツと外側のdivの両方にクリックハンドラを追加することにより、角度でこれを行うことができます。内側のdivでは、$event.stopPropagationを使用してイベントの伝播を停止する必要があります。そうしないと、外部クリックハンドラも呼び出されます。次に、outerDivクリックハンドラが呼び出されると、angleの$locationサービスを使用してモーダルを閉じることができます。それは時にモーダル「隠し」への可視性プロパティを設定すると良いでしょうちなみに

$('.wrapper').on('click', function(e) { 
    var modal = $(this).find('.modal'); 
    if (!modal.is(e.target) && modal.has(e.target).length == 0) { 
     modal.removeClass('opened'); 
    } 
}); 

：私はそれがこのようになるんだろうな方法に

https://plnkr.co/edit/a3b5fU9G6wuXLLhiyI2D

Answer 2

：添付plunkerを参照してください。ポインタイベントを無効にする代わりに閉じます。そうすれば、ユーザーはそれをクリックすることもできません。