Javascript 如何禁用页面的单击和滚动？

我在网站的左下角创建了一个“更多”按钮来显示菜单

当你点击按钮时，+变成x

我想，当你点击+的点击和滚动将被禁用的页面

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdown-menu-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <div class="fa-4x">
      <span class="fa-layers fa-fw">
        <i class="fas fa-circle"></i>
        <i class="fa-inverse fas fa-plus" data-fa-transform="shrink-6"></i>
      </span>
    </div>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdown-menu-action">
    <li><a href="/profil" data-drupal-link-system-path="profil"><i class="fas fa-id-card fa-lg"></i> Créer mon profil</a></li>
  </ul>
</div>

这是我的JS文件：

(function ($) {

  $('#dropdown-menu-action').on('show.bs.dropdown', function () {
       $('body').addClass('overlay-is-navbar-collapse');
  });

  $('#dropdown-menu-action').on('hide.bs.dropdown', function () {
       $('body').removeClass('overlay-is-navbar-collapse');
  });

})(window.jQuery);

更新

以下代码不起作用。如果单击“外部”，菜单将关闭，但类仍保留在主体上

  $('#dropdown-menu-action').on('click', () => {
       $('body').toggleClass('overlay-is-navbar-collapse');
  });

我尝试了以下代码，但不起作用：

  $('#dropdown-menu-action').on('shown.bs.dropdown', function () {
       $('body').addClass('overlay-is-navbar-collapse');
  });

  $('#dropdown-menu-action').on('hidden.bs.dropdown', function () {
       $('body').removeClass('overlay-is-navbar-collapse');
  });

---

您可以向主体添加一个类，以禁用滚动或直接在任意轴或所有轴上编辑样式

body.class{overflow-y:hidden；}

在JavaScript文件中，添加

单击
处理程序以切换body类名
覆盖为navbar collapse

(function ($) {

  $('#dropdown-menu-action').on('click', () => {
   $('body').toggleClass('overlay-is-navbar-collapse');
  });

})(window.jQuery);

和从CSS文件中删除
指针事件：无
，否则在添加类名
后，您将无法再次单击按钮

.overlay-is-navbar-collapse {
    overflow: hidden;
}

请提供一个snipet或jsfiddle当点击被禁用时，有人会如何点击X？哪个文件包含您上面提到的JS代码？我想这是一段根本没有被激发的代码。@VinodBhavnani我想当按钮被点击时，类覆盖是navbar collapse被添加到body@steeve61你用哪个库来显示弹出窗口，正如我看到的，你用Drupal制作了这个网站，那么你知道你用哪个插件来显示弹出窗口吗？谢谢你，它很管用，当我点击+1秒钟时，有一个橙色边框。如何删除它？我认为这是CSS大纲属性，您可以使用此选择器中的
outline:0
禁用它：
#block-views-block-profile-button-create-block-1.btn，#block-views-block-profile-button-create-block-1.btn:focus
.overlay-is-navbar-collapse {
    overflow: hidden;
}