jQueryでオーバーレイをかけた後の要素に干渉できるようにしたい

実現したいこと

暗くした後の画面の要素(ボタンなど）に干渉（クリックしたり、ホバーしたりなど）出来るようにしたいです。オーバーレイが画面を覆っているので奥の要素に干渉できないのは分かっているのですが、もし方法があれば教えてほしいと考えています。
初めて質問するので至らないところがあると思いますが、よろしくお願いします。

ソースコード

今現在の状態を載せておきます。

ボタンのz-indexを大きくしてボタンを前に出すのではなく、オーバーレイがかかったままボタンを押せるようにしたいです。

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width">
6    <link rel="stylesheet" type="text/css" href="style.css">
7    
8    <title>jQuery test</title>
9
10    <script src="jquery-3.4.1.min.js"></script>
11    <script src="modal.js"></script>
12</head>
13    <body>
14        <div id="div1"></div>
15        <button id="button">ボタン</button>
16    </body>
17</html>

CSS
1#div1{
2    z-index: 1;
3    position: fixed;
4    width: 97vw;
5    height: 98vh;
6    background-color: black;
7    opacity: 0.7;
8    display: none;
9}

javascript
1$(function() {
2    $('#div1').fadeIn(500);
3});

試したこと

Webや、技術書などを読んで一通り調べたのですが、上手く見つけることが出来ませんでした。

行動規範の内容に同意します

回答1件

ベストアンサー

いかがでしょうか。

css
1#div1{
2    z-index: 1;
3    position: fixed;
4    width: 97vw;
5    height: 98vh;
6    background-color: black;
7    opacity: 0.7;
8    display: none;
9    pointer-events: none; //追記
10}