html - Bootstrap Modal 对话框上的双垂直滚动条

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 处的示例代码.

问题似乎出在“transform-style: preserve-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;
}

享受 :)