ブートストラップモーダルダイアログの2つの垂直スクロールバー

Question

私のウェブサイトに画像のセクションがあり、画像をクリックするとウィンドウサイズモーダルダイアログが開きます。しかし、問題は私のモーダルに2つの垂直スクロールバーがあることです一方、私はちょうど表示されたい。 これに関して他のスタックソリューションを既に試していたが、すべてがうまくいかなかった。続き

はモーダルのスクリーンショットです：

そして、ここでは、コードです：

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; 
} 

お楽しみください:)