CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapmodal-dialog
Dave Hitt
Dave Hitt

Reputation: 31

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

I'm attempting to launch a form from the header of a website I'm designing, using a Bootstrap 3 modal window. Here's the link; the modal should launch from 'email signup':

http://pamaphilly.wpengine.com/

The issue is that the 'fixed logo ribbon' should be a persistent and fixed element at the top of the page. When I use fixed positioning, though, the modal doesn't work correctly. However, if I removed fixed positioning, it functions as expected. See this video: http://screencast.com/t/LeFCDXuf0GrE

The CSS class I'm changing is: 

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

Also, the html is just the standard modal demo:

<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>

Does anyone have any idea how I can get the modal to work while still having a fixed header, as intended?

Thanks in advance for any help...

Dave

Upvotes: 1

Views: 1906

Answers (1)

cvrebert
cvrebert

Reputation: 9259

Per the official docs:

Modal markup placement

Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.

Your mistake is also known as Bootlint problem ID E022.

The fix is move the <div class="modal ...">...</div> so that it's a direct child of the <body>, rather than being a descendant of the navbar.

Upvotes: 1

Related Questions