Question

我有一个模态叠加在另一个元素上。下部元素上的关闭按钮的z-index设置为1。创建模态时，原始的关闭按钮仍嵌套在新模态及其新的关闭按钮之上。

我尝试在dom中捕获此元素并将其隐藏，但是由于它不是父元素，因此我看不到它。

编辑：这是伪代码...问题是如何删除重叠的同级元素。

<div>
  <div>
    <img style={{z-index: 1; position: fixed;}}>close button (sibling, this one needs to be moved underneath or hidden)</img>
  </div>
<div>
<div>
  <div>
    <img style={{z-index: 1; position: relative;}}>close button (popup modal)</img>
  </div>
</div>

已解决：事实证明，无论元素在DOM层次结构中的位置如何（添加ID后），我都可以按其ID来获取元素并切换其显示。不知道为什么我不这样认为。 ¯_（ツ）_ /¯

const closeBtn = document.getElementById('closeBtnSibling');
closeLessonBtn.style.display = 'none';

和

closeLessonBtn.style.display = null;

Answer 1

style={z-index: 1; position: fixed;}-> style={{zIndex: 1, position: 'fixed'}}

反应内联样式参考：https://reactjs.org/docs/dom-elements.html#style

Answer 2

您要完成什么？您是否正在使用CSS或SASS进行样式设置？

固定位置应始终具有宽度。

例如：

.fixed {
   position: fixed;
   top: 0; 
   left: 0;
   width: 100%;
   padding: 20px;
   background: rgba(255,255,255,.5);
}

确保将HTML和BODY的宽度和高度设置为100％。

为固定关闭按钮提供更高的索引。

另外，另一个简单的提示是不要使用空div。只需将其包装成一个占位符，这样在检查元素时就不会在源中将其输出。

Answer 3

说实话，这根本不像是反应代码。通常对于模态，您需要检查this.state来打开或关闭模态，并且整个实例将在实例化类的返回中呈现。（该社区中的代表不足，无法对此发表评论。）

无法隐藏将z-index设置为1

3 个答案: