javascript - Office UI Fabric JS 覆盖不覆盖其他组件

Question

在 Office UI Fabric JS 中，覆盖组件不会覆盖下拉组件。这是意料之中的事情还是我做错了什么？

var OverlayComponent = document.querySelector(".ms-Overlay");
var Overlay = new fabric['Overlay'](OverlayComponent);
var OverlayExampleButton = document.querySelector(".ms-Button");

OverlayExampleButton.onclick = function() {
  Overlay.show();
};

var DropdownHTMLElements = document.querySelectorAll('.ms-Dropdown');
for (var i = 0; i < DropdownHTMLElements.length; ++i) {
  var Dropdown = new fabric['Dropdown'](DropdownHTMLElements[i]);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.min.css" />
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.components.min.css" />
<script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/js/fabric.min.js"></script>

<div class="ms-Overlay ms-Overlay--dark"></div>

<div id="content-main">
  <div class="padding">

    <div class="ms-Grid-row">
      <div class="ms-Dropdown" tabindex="0">
        <label class="ms-Label">Type: </label>
        <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
        <select class="ms-Dropdown-select">
          <option>Choose a type&amp;hellip;</option>
          <option>A</option>
          <option>B</option>
          <option>C</option>
          <option>D</option>
          <option>E</option>
          <option>F</option>
        </select>
      </div>
    </div>

    <button class="ms-Button ms-Button--primary" id="highlight-button">
            <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
            <span class="ms-Button-label" id="button-text">Hello</span>
            <span class="ms-Button-description" id="button-desc"></span>
        </button>
  </div>
</div>

Answer 1

我不确定这是否会被视为错误，但修复非常简单。始终确保您的覆盖定义在您希望覆盖的内容之后(即页面底部)。

<div id="content-main">
 <!-- snipped for brevity -->
</div>
<div class="ms-Overlay ms-Overlay--dark"></div>

或者，您指定一个内联 z-index。默认值为 z-index: 0。将它设置为 z-index: 1 也将确保它位于其他元素之上。

<div class="ms-Overlay ms-Overlay--dark" style="z-index: 1;"></div>

此外，您的示例使用的是 1.2 版本，但最新版本是 1.5。虽然它没有解决这个问题，但它确实解决了许多您可能尚未遇到的其他问题。

<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.5.0/css/fabric.min.css" />
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.5.0/css/fabric.components.min.css" />
<script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.5.0/js/fabric.min.js"></script>