我离开了导航菜单。代码如下 -
<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";
}
}
}
一切都很完美。我想禁用背景,以便在弹出此弹出窗口时用户无法与背景元素进行交互。我如何实现这一目标?
提前致谢!