Javascript 激活弹出窗口时禁用背景

我离开了导航菜单。代码如下-

<div id="pdAppSidenav" class="sidenav show-xs hidden-lg" style="display:none">
  <a href="#">Life Insurance</a>


    <section id="cd-timeline" class="cd-container">

        <div class="cd-timeline-block">
            <div class="cd-timeline-img cd-picture cd-picture-active">
            </div>
            <div class="cd-timeline-content cd-timeline-content-active">
                <h4>Quote</h4>
            </div> <!-- cd-timeline-content -->
        </div> <!-- cd-timeline-block -->

        <div class="cd-timeline-block">
            <div class="cd-timeline-img cd-picture">
            </div>
            <div class="cd-timeline-content">
                <h4>Apply</h4>
            </div> <!-- cd-timeline-content -->
        </div> <!-- cd-timeline-block -->

        <div class="cd-timeline-block">
            <div class="cd-timeline-img cd-picture">
            </div>
            <div class="cd-timeline-content">
                <h4>Approve</h4>
            </div> <!-- cd-timeline-content -->
        </div> <!-- cd-timeline-block -->

        <div class="cd-timeline-block">
            <div class="cd-timeline-img cd-picture">
            </div>
            <div class="cd-timeline-content">
                <h4>Pay</h4>
            </div> <!-- cd-timeline-content -->
        </div> <!-- cd-timeline-block -->

    </section> <!-- cd-timeline -->

    <div class="pd-content-bottom">
                <h3>XXXXXXX</h3>
                <p>XXXXX</p>
    </div> 

</div>

一切都很完美。我想禁用背景，这样当弹出窗口打开时，用户就不能与背景元素交互。我如何做到这一点

---

提前谢谢

与视口大小相同的固定位置元素以及“高于”内容但“低于”活动内容的“z索引”是一种方式。将代码共享到代码段或fiddler中以更好地理解。与视口大小相同的固定位置元素以及“高于”内容但“低于”的“z索引”活动内容是以一种方式将代码共享到代码片段或fiddler中，以便更好地理解。

<div id="hamburgerIconId" class="hamburgerIcon"></div>

function leftnav() {
  var collapse_sidebar_modal = document.getElementById('pdAppSidenav');
  var  collapse_sidebar_icon = document.getElementById("hamburgerIconId");
    console.log(collapse_sidebar_modal);
    var isOpen="false"
        collapse_sidebar_icon.onclick = function() { 
            if(isOpen==="false"){
                collapse_sidebar_modal.style.display = "block";
            collapse_sidebar_modal.style.width = "250px";
                isOpen="true";
            }
            else{
                collapse_sidebar_modal.style.display = "none";
            collapse_sidebar_modal.style.width = "0px";
                isOpen  = "false";
            }
        }
}