模态弹出窗口中的溢出
Posted
技术标签:
【中文标题】模态弹出窗口中的溢出【英文标题】:Overflow in modal popup 【发布时间】:2014-10-28 20:24:54 【问题描述】:我正在尝试在模式弹出窗口中创建溢出。溢出应该只用于水平滚动。但是文本跨越了弹出模式的高度。 这是codepen的链接 http://codepen.io/anon/pen/AKqJf
CSS:
html,body margin:0; padding:10px; -webkit-backface-visibility:hidden;
img width:100%;
/* text-based popup styling */
.white-popup
position: relative;
background: #FFF;
padding: 25px;
width:auto;
max-width: 400px;
height: 20px;
overflow-y:scroll;
margin: 0 auto;
/*
====== Zoom effect ======
*/
.zoom-in
/* start state */
.anim
opacity: 0;
transition: all 0.2s ease-in-out;
transform: scale(0.8);
&.mfp-bg
opacity: 0;
transition: all 0.3s ease-out;
/* animate in */
&.mfp-ready
.anim
opacity: 1;
transform: scale(1);
&.mfp-bg
opacity: 0.8;
/* animate out */
&.mfp-removing
.anim
transform: scale(0.8);
opacity: 0;
&.mfp-bg
opacity: 0;
谢谢
【问题讨论】:
不清楚你在问什么 基本上我试图创建的是一个带有垂直溢出的模态弹出窗口 【参考方案1】:我没有完全明白你的问题,但请检查一下
.white-popup
position: relative;
background: #FFF;
padding: 25px;
width:auto;
max-width: 400px;
height: 100px;
overflow-y:scroll;
margin-top:100px;
【讨论】:
以上是关于模态弹出窗口中的溢出的主要内容,如果未能解决你的问题,请参考以下文章
如何切换到模态弹出窗口并使用Telerik中的编码步骤识别其中的元素