Html 无法在余烬模式对话框中实现中心滚动
我使用ember modal dialog插件在ember应用程序中设计了一个模式对话框。我想在对话框中实现中心滚动。但无法实现 feed.hbsHtml 无法在余烬模式对话框中实现中心滚动,html,css,ember.js,ember-cli,Html,Css,Ember.js,Ember Cli,我使用ember modal dialog插件在ember应用程序中设计了一个模式对话框。我想在对话框中实现中心滚动。但无法实现 feed.hbs <p {{action "toggleModal" photo }}>{{photo.0.numFives}}</p> {{#if photo.0.dialogShowing}} {{#modal-dialog translucentOverlay=true
<p {{action "toggleModal" photo }}>{{photo.0.numFives}}</p>
{{#if photo.0.dialogShowing}}
{{#modal-dialog translucentOverlay=true
targetAttachment='none'
container-class='centered-scrolling-container'
overlay-class='centered-scrolling-overlay'
wrapper-class='centered-scrolling-wrapper'}}
<p>People who like this</p>
<button class="close" {{action 'dialogClose' photo}}>X</button>
<img src = "images/shape-line-separator.png" style = "width:340px;height:1px">
{{#each model.feed.fiver as |fiver|}}
<div class="col-sm-12">
<div class = "col-sm-4">
<div class = "pr">
<img src = "{{fiver.dp_url}}" onload = "OnImageLoad(event); "/>
</div>
</div>
<div class = "col-sm-3">
<p class="username">{{fiver.full_name}}</p>
<p class="userkarma">{{fiver.likes}} like</p>
</div>
<img src = "images/shape-line-separator.png">
</div>
{{/each}}
{{/modal-dialog}}
{{/if}}
在上面的代码中,出现了对话框,但它累积的数据超出了最大高度,不像中心滚动。该对话框也不是固定在一个点上。我想在滚动时固定在一个点上的对话框
.centered-scrolling-wrapper {
position: fixed;
z-index: 99;
height: 100vh;
left: 0;
right: 0;
top: 0;
overflow-y: scroll;
}
.centered-scrolling-overlay {
display: flex;
display: -webkit-flex;
align-items: flex-start;
-webkit-align-items: flex-start;
justify-content: center;
-webkit-justify-content: center;
min-height: 100vh;
padding: 10em;
position: relative;
height: auto;
}
.centered-scrolling-overlay.translucent {
background-color: rgba(35, 31, 32, 0.81);;
}
/* basic modal style (an example, this is not necessary for the centering) */
.centered-scrolling-container {
position: relative;
background-color: #343031;;
border-radius:2px;
width:360px;
max-height:250px;
box-shadow:0 0 0px;
padding:0px;
top:25%;
}