Question

我想显示完全关闭按钮/文本，同时保持模式的位置：固定和溢出：滚动，如果我将overflow：scroll替换为overflow：visible，它将完全显示，但停止滚动模式和模式内容。

<div id="root_component">
       <div class="modal" >
               <a class="modal-close btn-floating btn-small 
                   waves-effect waves-light right clearfix">
                        <i class="material-icons">cancel</i>
                    </a>
          <div class="modal-content"></div>
     </div>    
</div>



.modal {
        width: 80% !important;
        overflow-y: scroll;
        z-index: 1003;
        display: block;
        opacity: 1;
        transform: scaleX(1) scaleY(1);
        position: fixed;
        padding: 0;
        margin: auto;
        border-radius: 2px;
    }
    #root_component .clearfix {
        position: absolute;
        right: -16px;
        top: -16px;
        z-index: 100;
    }

image attached

Answer 1

为什么在.modal上启用溢出？在.modal-content上启用它似乎更合适，如果我理解正确的话，它将解决您的问题。

Answer 2

您必须保持.modal可见才能显示关闭按钮。您可以将overflow: auto放入您的内容中：

.modal {
  overflow: visible;
}
.modal-content {
  overflow: auto;
}

显示整个关闭按钮在模态外部可见

2 个答案: