Question

嗨即时通讯使用来自boostrap的代理主题，但我自定义了它的大小但是当它点击它之外它甚至没有关闭，甚至来自引导程序的正常模态也没有关闭，（有时它有时关闭它的注释）生病我的引导模式下面：

          <p class="buttonp ">    <a href="#portfolioModal" class="portfolio-link" data-toggle="modal" data-dismiss="modal">
Click for more info </a></p>               
</div>

                               <!-- Portfolio Modal 1 -->
                        <div id="portfolioModal" class="modal fade portfolio-modal"   tabindex="-1" role="dialog" aria-labelledby="portfolioModal"  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-md-5">
                                            <div class="modal-body">
                                                <!-- Project Details Go Here -->
                                                <p> Lorem ipsum dolor sit amet, consectetur adip iscing elit. Suspendisse laoreet est nunc. Na </p>
                                                                                  <p> Lorem ipsum dolor sit amet, consectetur adip iscing elit. Suspendisse laoreet est nunc. Na </p>
              </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- -->

Answer 1

您的代码有问题：

您已将模态代码放在其他元素中，而不是直接在正文中Bootstrap Modals
您调整了模态体和模态内容的大小，因此它占据了整个屏幕。模态有一个占据整个屏幕的图层（模态背景类），在它上面它们显示模态。这个模态背景类在接收到点击时会关闭模态，但是现在它不会这样做，因为模态对话框会覆盖它。

我想你可能想要覆盖一些元素。看看Example on CodePen

<div class="parent">
  <div class="content">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet</div>
  <div class="overlay">Flower, Plants, Herbs, Trees.,Flower, Plants, Herbs, Trees,Flower, Plants, Herbs, Trees,Flower, Plants, Herbs, Trees,</div>
</div>
.parent{
  background:green;
  position: fixed;
}

.content{
  background: blue;
  width: 100px;
}

.overlay{
  position:absolute;
  background: red;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

单击外部时，Twiiter Bootstrap模态未关闭

1 个答案: