Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress From Bootstrap to WordPress Add Bootstrap Components to WordPress Theme How to Add Bootstrap Modal Windows to Your WordPress Theme

Alexis Leblanc-Isabelle
Alexis Leblanc-Isabelle
9,558 Points

Modal window appear but doesnt work

Hi Team !

So I created my form and succed to make it appear using the modal window of bootstrap however, my modal window doesn't work properly.

All my screen turn darker instead of just the secton behind my modal window so wherever I click, the window just quit and I go back to my page. Its as if the window was behind the quitting section and I could no access it.

http://i302.photobucket.com/albums/nn109/tijoblo14/Screen%20Shot%202015-03-04%20at%2012.14.27%20PM_zpscrmdo8ow.png alt text

My Footer

      <hr>

      <footer>
        <p>&copy; <?php bloginfo('name'); ?> <?php echo date('Y'); ?></p>
      </footer>
    </div> <!-- /container -->


    <div class="modal fade" id="contactForm">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Contact Form</h4>
      </div>
      <div class="modal-body">
        <?php if( function_exists( 'ninja_forms_display_form' ) ){ ninja_forms_display_form( 1 ); } ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>        
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

     <?php wp_footer(); ?>

  </body>
</html>

Thanks for your help

2 Answers

Sean T. Unwin
Sean T. Unwin
28,657 Points

What happens if you change the z-index to something like 100 on .modal-content?

Alexis Leblanc-Isabelle
Alexis Leblanc-Isabelle
9,558 Points

The only tricks I've found for now is to use the data-backdrop="false" inside of the Button. And then use this CSS to create a backdrop effect. The problem is now that if I click outside of the form, the form no longer close due to the data-backdrop="false". And when I submit the form, the form close whatever if the form have been submitted or not and I need to re-open it to see the message. So my form is not working very properly haha.

.modal::after {
  content: "";
  background: black;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: -300px;
  right: 0;
  position: absolute;
  z-index: -1;   
}