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

Office UI Fabric JS覆盖不会覆盖其他组件

1 个答案: