HTML5 と CSS3 で作成された Keenan Payne が説明するモーダル ウィンドウを使用します。ユーザーがモーダル ウィンドウの外側の暗い背景をクリックすると、ウィンドウが閉じます。誰もこれを行う方法を知っていますか?
Keenan Payne によるモーダル ウィンドウ: http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
HTML5 と CSS3 で作成された Keenan Payne が説明するモーダル ウィンドウを使用します。ユーザーがモーダル ウィンドウの外側の暗い背景をクリックすると、ウィンドウが閉じます。誰もこれを行う方法を知っていますか?
Keenan Payne によるモーダル ウィンドウ: http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
#openModal とは別のものでターゲットを変更する必要があります。jQueryをインポートできます。これを<head>
セクションに入れます:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</body>
タグの直前に次のコードを追加します。
<script type="text/javascript">
$("#openModal").click( function() {
if (!$("#openModal>div").is(":hover")) document.location.href='#';
});
</script>
したがって、ユーザーがオーバーレイをクリックすると、ターゲットが「#」に変更され、モーダルが閉じられます。