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

时间:2016-04-14 17:46:56

标签: javascript jquery css twitter-bootstrap

嗨即时通讯使用来自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>
                        <!-- -->    

1 个答案:

答案 0 :(得分:0)

您的代码有问题:

  1. 您已将模态代码放在其他元素中,而不是直接在正文中Bootstrap Modals
  2. 您调整了模态体和模态内容的大小,因此它占据了整个屏幕。模态有一个占据整个屏幕的图层(模态背景类),在它上面它们显示模态。这个模态背景类在接收到点击时会关闭模态,但是现在它不会这样做,因为模态对话框会覆盖它。
  3. 我想你可能想要覆盖一些元素。看看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;
    }