2014-09-04 57 views
1

我試圖在模式彈出式菜單中創建溢出。溢出應該只用於水平滾動。但是文字跨越了彈出式模式的高度。 繼承人的鏈接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; 
    } 

    } 

} 

謝謝

+0

目前還不清楚你是什麼詢問 – Danield 2014-09-04 07:24:52

+0

基本上,我試圖創建的是一個垂直溢出的模式彈出 – nabeelaa 2014-09-04 07:27:47

回答

0

我並沒有完全得到你的問題,但檢查了這

.white-popup { 
position: relative; 
background: #FFF; 
padding: 25px; 
width:auto; 
max-width: 400px; 
height: 100px; 
overflow-y:scroll; 
margin-top:100px; 
}