Angular Material 如果在具有 z-index 的固定元素上单击外部,md-menu 元素不会关闭
Angular Material md-menu element does not close if clicked outside on a fixed element with z-index
我的文档中有一个基本的 <md-menu>
元素。默认情况下,如果单击文档中的任何位置,它将自行关闭。虽然,如果我在带有 z-index
的 fixed
元素内单击,它不会关闭。
<div class="menu-demo-container" layout-align="center center" layout="column">
<md-menu>
<md-button class="md-primary md-raised" ng-click="ctrl.openMenu($mdOpenMenu, $event)">
Test
</md-button>
<md-menu-content width="4">
<md-menu-item>
<md-button>
Menu Item
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</div>
<div style="position:fixed; z-index: 100; backgorund-color:red;left:0;top:0;bottom:0">
Try clicking here while the the md-menu is open
</div>
如果我单击元素之外的任何地方(包括固定元素),如何关闭所有 <md-menu>
元素?
元素的 z-index
存在问题,该元素大于背景的 z-index
。可以通过单击 md-backdrop
元素来关闭菜单。 md-backdrop.md-menu-backdrop
z-index
等于 99。
An element with greater stack order is always in front of an element
with a lower stack order.
要解决问题,请减少元素的 z-index。在你的情况下,它应该小于 99
我的文档中有一个基本的 <md-menu>
元素。默认情况下,如果单击文档中的任何位置,它将自行关闭。虽然,如果我在带有 z-index
的 fixed
元素内单击,它不会关闭。
<div class="menu-demo-container" layout-align="center center" layout="column">
<md-menu>
<md-button class="md-primary md-raised" ng-click="ctrl.openMenu($mdOpenMenu, $event)">
Test
</md-button>
<md-menu-content width="4">
<md-menu-item>
<md-button>
Menu Item
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</div>
<div style="position:fixed; z-index: 100; backgorund-color:red;left:0;top:0;bottom:0">
Try clicking here while the the md-menu is open
</div>
如果我单击元素之外的任何地方(包括固定元素),如何关闭所有 <md-menu>
元素?
元素的 z-index
存在问题,该元素大于背景的 z-index
。可以通过单击 md-backdrop
元素来关闭菜单。 md-backdrop.md-menu-backdrop
z-index
等于 99。
An element with greater stack order is always in front of an element with a lower stack order.
要解决问题,请减少元素的 z-index。在你的情况下,它应该小于 99