1

在 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>

4

1 回答 1

1

我不确定这是否会被视为错误，但修复很简单。始终确保您的叠加层是在您想要叠加的内容之后定义的（即页面底部）。

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

或者，您指定一个 inline 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>
于 2018-04-26T15:46:24.203 回答