模态弹出窗口中的溢出

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中的编码步骤识别其中的元素

在模态上显示弹出窗口

Internet Explorer 中的 Iframe 内不显示模态弹出窗口

从 Flex 中的模式弹出窗口打开模式弹出窗口?

Parsley js:如何验证模态弹出窗口内的输入字段并在模态本身内显示错误消息