单击外部时，Twiiter Bootstrap Modal未关闭

Twiiter Bootstrap Modal is not closing when click outside

本文关键字：Modal Bootstrap Twiiter 外部单击更新时间：2023-09-26

嗨，我使用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>
                        <!-- -->

代码的问题是：

根据Bootstrap Modals上的指令，您已经将模式代码放在其他元素中，而不是直接放在主体中
您已经调整了模态主体和模态内容的大小，所以它占据了整个屏幕。模态有一个占据整个屏幕的层（模态背景类），在它上面显示模态。这个modal background类在接收到点击时关闭modal，但现在不能这样做，因为它被modal对话框覆盖了

我想你可能想在某些元素上进行叠加。看看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;
}