在bootstrap中打开的下拉列表中的背景黑色屏幕

Question

朋友您好我想在bootstrap下拉列表中显示黑色不透明度屏幕我使用以下脚本进行此操作

var modal = document.getElementById('black');

  window.onclick = function(event) {
     if (event.target == modal) {
    modal.style.display = "none";
     }
 }


$('.drp').on('hidden.bs.dropdown', function () {
  modal.style.display = "none";
});

$('.drp').on('shown.bs.dropdown', function () {
 modal.style.display = "block";

}）;

和下拉代码正在关注

<li class="drp dropdown mega-dropdown lst-mbl">

<a href="#" class="btn btn-lg top-btn dropdown-toggle"><i class="fa fa-shopping-basket" aria-hidden="true"></i></a>
 <ul class="dropdown-menu dropdown-menu-right mega-dropdown-menu up-caret">

<li>
                        <a href="#myProfile" data-toggle="modal">
        <span class="lst-icon"><i class="icon-user icons"></i></span>
        <p><span style="font-weight:bold;">My Profile</span><br><span style="">To help improve accessibility for people using </span></p>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <span class="lst-icon"><i class="icon-clock icons"></i></span>
                            <p><span style="font-weight:bold;">Order History</span><br><span style="">To help improve accessibility for people using </span></p>
                        </a>
                    </li>

但我使用以下代码停止关闭内部点击下拉列表

$(document).ready(function() {

$('li.dropdown.mega-dropdown a').on('click', function (event) {
$(this).parent().toggleClass("open");

  });
  $('body').on('click', function (e) {
if (!$('li.dropdown.mega-dropdown').is(e.target) && $('li.dropdown.mega-dropdown').has(e.target).length === 0 && $('.open').has(e.target).length === 0) {
    $('li.dropdown.mega-dropdown').removeClass('open');
}
 });


 });   

但我的背景不透明度屏幕未显示