引导程序 3 模式在放置在固定父级中时无法正常工作

Bootstrap 3 modal not working correctly when placed inside a fixed parent

本文关键字：常工作 工作 模式 引导程序      更新时间：2023-09-26

我正在尝试使用 Bootstrap 3 模式窗口从我正在设计的网站的标题启动表单。这是链接;模式应从"电子邮件注册"启动：

http://pamaphilly.wpengine.com/

问题是"固定徽标功能区"应该是页面顶部的持久固定元素。但是，当我使用固定定位时，模态无法正常工作。但是，如果我删除固定定位，它会按预期运行。观看此视频：http://screencast.com/t/LeFCDXuf0GrE

我正在更改的 CSS 类是： 

.fixed-logo-ribbon {
    background-color: #e41535;
    height: 4.75em;
    width: 100%;
    min-height: 5em;
    top: 0;
    border: 0;
}

此外，html 只是标准的模态演示：

<div class="fixed-logo-ribbon">
  <div class="container logo-container">
    <a href="http://pamaphilly.wpengine.com/">
      <img class=logo-PAMA type="image/svg+xml" src="<?php bloginfo('template_url'); ?>/img/PAMA-logo-2014-masthead.svg" height="40" width="360" alt="PAMA-logo">
    </a><!-- end logo div -->
   <div class="social-media-icons pull-right">
     <div class="join-us less-margin">
       <a data-toggle="tooltip" data-placement="bottom" title="Join the AMA Now" class="join-link" target="_blank" href="http://www.jointheama.com/">join now</a>
     </div>
     <!-- Button trigger modal -->
     <button type="button" class="btn btn-primary btn-lg join-us" data-toggle="modal" data-target="#myModal">
       Launch demo modal
     </button>
     <!-- Modal -->
     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal">
               <span aria-hidden="true">&times;</span>
                <span class="sr-only">Close</span>
              </button>
              <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
              ...
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

有没有人知道如何让我在仍然具有固定标头的情况下让模态工作，如预期的那样？

提前感谢您的任何帮助...

戴夫

根据官方文档：

模式标记放置

始终尝试将模态的 HTML 代码放在文档中的顶级位置，以避免其他组件影响模态的外观和/或功能。

您的错误也称为 Bootlint 问题 ID E022 。

解决方法是移动<div class="modal ...">...</div>，使其成为<body>的直接子级，而不是导航栏的后代。

相关文章：