我正在尝试在页面中间显示宽度或高度为dyç的模式
我在div内有一个样式为绝对的div,其位置相对,并且按钮未完全显示,
我尝试更改z-index。
我的代码https://jsfiddle.net/renatoclt/qhn9v2py/3/
的链接这是我的HTML和CSS
.ngx-utilitario-modal {
display: table;
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
z-index: 1000;
overflow-y: auto;
margin-top: 15px;
}
.ngx-utilitario-modal .ngx-utilitario-modal-body {
display: table-cell;
vertical-align: middle;
padding: 0;
margin: 0;
width: fit-content;
height: fit-content;
overflow-y: auto;
}
.ngx-utilitario-modal .ngx-utilitario-modal-content {
background: #fff;
margin: 0 auto;
width: fit-content;
height: fit-content;
max-height: 100%;
overflow-y: auto;
padding: 15px;
}
.ngx-utilitario-modal .ngx-utilitario-modal-content .ngx-utilitario-modal-cerrar {
opacity: 1;
font-size: 18px;
position: absolute;
top: -30px;
right: -30px;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 100%;
-moz-border-radius: 100%;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
padding: 0px;
}
.ngx-utilitario-modal-background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
opacity: 0.75;
z-index: 900;
animation-delay: 2s;
}
<div class="ngx-utilitario-modal">
<div class="ngx-utilitario-modal-body">
<div class="ngx-utilitario-modal-content">
<div style="position: relative;">
<button type="button" class="ngx-utilitario-modal-cerrar" (click)="close()">
<span aria-hidden="true">×</span>
</button>
</div>
<div>
este es ng-content
</div>
</div>
</div>
</div>
<div class="ngx-utilitario-modal-background" [@openClose]="showModal"></div>
<div class="ngx-utilitario-modal-open"></div>
结果实际上显示了按钮的一半。我希望完全显示该按钮
答案 0 :(得分:1)
在您的.ngx-utilitario-modal .ngx-utilitario-modal-content
类上,您应该删除overflow-y: auto;
然后,您可能需要调整模式的宽度,使其不为100%,以便不会在侧面切断关闭按钮。
类似这样的东西:
.ngx-utilitario-modal{
display: table;
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
z-index: 1000;
overflow-y: auto;
margin-top: 15px;
}
.ngx-utilitario-modal .ngx-utilitario-modal-body {
display: table-cell;
vertical-align: middle;
padding: 0;
margin: 0;
width: fit-content;
height: fit-content;
overflow-y: auto;
}
.ngx-utilitario-modal .ngx-utilitario-modal-content{
background: #fff;
margin: 0 auto;
width: fit-content;
height: fit-content;
max-height: 100%;
padding: 15px;
width: 80%;
}
.ngx-utilitario-modal .ngx-utilitario-modal-content .ngx-utilitario-modal-cerrar{
opacity: 1;
font-size: 18px;
position: absolute;
top: -30px;
right: -30px;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 100%;
-moz-border-radius:100%;
box-shadow:0px 1px 2px rgba(0,0,0,0.2);
padding: 0px;
}
.ngx-utilitario-modal-background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
opacity: 0.75;
z-index: 900;
animation-delay: 2s;
}
<div class="ngx-utilitario-modal">
<div class="ngx-utilitario-modal-body">
<div class="ngx-utilitario-modal-content">
<div style="position: relative;">
<button type="button" class="ngx-utilitario-modal-cerrar" (click)="close()">
<span aria-hidden="true">×</span>
</button>
</div>
<div>
este es ng-content
</div>
</div>
</div>
</div>
<div class="ngx-utilitario-modal-background" [@openClose]="showModal"></div>
<div class="ngx-utilitario-modal-open"></div>
答案 1 :(得分:1)
如果您想使用overflow: auto
,则不能使用。溢出必须设置为visible
。