Question

我正在尝试使用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>

有没有人知道我怎样才能让模态工作，同时还有一个固定的标题，如预期的那样？

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

戴夫

Answer 1

根据官方文件：

Modal markup placement

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

您的错误也称为Bootlint problem ID E022。

修复移动<div class="modal ...">...</div>，使其成为<body>的直接子项，而不是导航栏的后代。

当置于固定父级内时，Bootstrap 3模态无法正常工作

1 个答案:

Modal markup placement