弹出窗口激活时禁用背景

时间:2017-10-03 01:43:53

标签: javascript html css

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

<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>

当我点击以下图标时,此弹出窗口切换(打开和关闭) -

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

以下的JS是 -

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";
            }
        }
}

一切都很完美。我想禁用背景,以便在弹出此弹出窗口时用户无法与背景元素进行交互。我如何实现这一目标?

提前致谢!

0 个答案:

没有答案