引導模式對話框上的雙垂直滾動條

Question

我的網站上有一段圖片，當我點擊圖片時，窗口大小模態對話框打開。但問題是我的模態上有兩個垂直滾動條而我只想要顯示一個。 已經嘗試了其他堆棧解決方案，但他們都沒有爲我工作。

下面是模式的截圖：

這裏是編碼：

html, 
 
body { 
 
    background: url(../img/stars-bg.jpg) no-repeat fixed; 
 
    background-size: cover; 
 
    transform-style: preserve-3d; 
 
    overflow-x: hidden; 
 
} 
 
/*Portfolio css*/ 
 

 
section h2 { 
 
    margin: 0; 
 
    font-size: 3em; 
 
    color: #e59390; 
 
} 
 
hr.star-primary { 
 
    border-color: #e59390; 
 
} 
 
#portfolio img { 
 
    vertical-align: middle; 
 
    width: 100%; 
 
} 
 
#portfolio .portfolio-item .portfolio-link .caption { 
 
    background: #E0C6C5; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 0; 
 
    transition: all ease .5s; 
 
    -webkit-transition: all ease .5s; 
 
    -moz-transition: all ease .5s; 
 
} 
 
#portfolio .portfolio-item .portfolio-link .caption:hover { 
 
    opacity: 0.9; 
 
} 
 
.portfolio-modal .modal-content h2 { 
 
    margin: 0; 
 
    font-size: 3em; 
 
    color: #e59390; 
 
} 
 
.portfolio-modal strong > a { 
 
    color: #e59390; 
 
} 
 
.portfolio-modal button.btn-default { 
 
    background-color: #e59390; 
 
    color: #fff; 
 
    border-color: #e59390; 
 
} 
 
.portfolio-modal button.btn-default:hover { 
 
    background-color: #896981; 
 
    color: #fff; 
 
    border-color: #896981; 
 
}

<div class="portfolio-modal modal fade" id="portfolioModal15" tabindex="-1" role="dialog" aria-hidden="true"> 
 
    <div class="modal-content"> 
 
    <div class="close-modal" data-dismiss="modal"> 
 
     <div class="lr"> 
 
     <div class="rl"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-lg-8 col-lg-offset-2"> 
 
      <div class="modal-body"> 
 
      <h2>Coming soon</h2> 
 
      <hr class="star-primary"> 
 
      <img src="img/portfolio/coming_soon11.png" class="img-responsive img-centered" alt=""> 
 
      <p>Currently in progress ...</p> 
 
      <ul class="list-inline item-details"> 
 
       <li>Client: 
 
       <strong><a href="http://startbootstrap.com">None</a> 
 
            </strong> 
 
       </li> 
 
       <li>Date: 
 
       <strong><a href="http://startbootstrap.com">None</a> 
 
            </strong> 
 
       </li> 
 
       <li>Service: 
 
       <strong><a href="http://startbootstrap.com">None</a> 
 
            </strong> 
 
       </li> 
 
      </ul> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

請幫助我。謝謝！

Answer 1

檢查示例代碼CODEPEN。

問題似乎是與 「變換風格：保持-3D;」

希望能解決你的問題

HTML（格式化）：

<!-- Trigger the modal with a button --> 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#portfolioModal15">Open Modal</button> 
<div class="portfolio-modal modal fade" id="portfolioModal15" role="dialog" aria-hidden="true"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <div class="close-modal" data-dismiss="modal"> 
     <div class="lr"> 
      <div class="rl"> 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="modal-body"> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-lg-8 col-lg-offset-2"> 

      <h2>Coming soon</h2> 
      <hr class="star-primary"> 
      <img src="http://www.laminaresearchcenter.com/images/comingsoon.png" class="img-responsive img-centered" alt=""> 
      <p>Currently in progress ...</p> 
      <ul class="list-inline item-details"> 
       <li>Client: 
       <strong><a href="http://startbootstrap.com">None</a> 
            </strong> 
       </li> 
       <li>Date: 
       <strong><a href="http://startbootstrap.com">None</a> 
            </strong> 
       </li> 
       <li>Service: 
       <strong><a href="http://startbootstrap.com">None</a> 
            </strong> 
       </li> 
      </ul> 
      <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button> 

      </div> 
     </div> 
     </div> 
    </div> 


    </div> 
</div> 

CSS：

html, 
body { 
    background: url('https://supernovacondensate.files.wordpress.com/2012/09/star-cluster-planet.jpg') no-repeat fixed; 
    background-size: cover; 
    /* transform-style: preserve-3d; */ 
    overflow-x: hidden; 
} 


/*Portfolio css*/ 

section h2 { 
    margin: 0; 
    font-size: 3em; 
    color: #e59390; 
} 

hr.star-primary { 
    border-color: #e59390; 
} 

#portfolio img { 
    vertical-align: middle; 
    width: 100%; 
} 

#portfolio .portfolio-item .portfolio-link .caption { 
    background: #E0C6C5; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
    transition: all ease .5s; 
    -webkit-transition: all ease .5s; 
    -moz-transition: all ease .5s; 
} 

#portfolio .portfolio-item .portfolio-link .caption:hover { 
    opacity: 0.9; 
} 

.portfolio-modal .modal-content h2 { 
    margin: 0; 
    font-size: 3em; 
    color: #e59390; 
} 

.portfolio-modal strong > a { 
    color: #e59390; 
} 

.portfolio-modal button.btn-default { 
    background-color: #e59390; 
    color: #fff; 
    border-color: #e59390; 
} 

.portfolio-modal button.btn-default:hover { 
    background-color: #896981; 
    color: #fff; 
    border-color: #896981; 
} 

享受:)