Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by bryanbarrera2
bryanbarrera2
1,510 Points

My Modal window isn't working

ISSUE I followed all steps. I compared the 'download files' with Bootstrap 3.2.0 library files and the CSS/JS are different versions. The issue I am having is when i click the modal window button - the modal window opens but closes quickly (So i can't even enter any information).

I am not sure if there is a conflict between libraries. Can anyone help?

WHAT I DID What i did was just overwrite the JS and CSS files from the 'download files' (versions 3.1.1) with the bootstrap 3.2.0 JS/CSS files and you will see what i mean. the modal window will just open and close quickly.. pretty strange.

9 Answers

Andrew Shook
Andrew Shook
31,709 Points

Found this on the forum, thought it might help.

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

The differences between BS 3.1 and 3.2 shouldn't be cause the problem. Do you have your site on a sever yet? If you do post the url and I'll look it over. If you don't have it on a server, trying posting the html for a single page hear on treehouse and we can start from there.

bryanbarrera2
bryanbarrera2
1,510 Points
bryanbarrera2
bryanbarrera2
1,510 Points

I have it locally, its not online. But If you download the download files from the video and just swap out the CSS/JS libraries with the new updated ones from getbootstrap.com and visit that page with sidebar from the video you will see what I mean when you click the button in the sidebar. The modal window just opens and closes quickly.

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

I'll give it a try.

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

Ok, so I just tested it and it worked fine for me. Post the code for your button and modal.

bryanbarrera2
bryanbarrera2
1,510 Points
bryanbarrera2
bryanbarrera2
1,510 Points

Widget Button

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#contactForm"> Contact Us</button>

Modal Window Markup

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

It doesn't work for me.. I am in Windows 7, test both in Chrome & Firefox

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

what version of the browsers are you using?

bryanbarrera2
bryanbarrera2
1,510 Points
bryanbarrera2
bryanbarrera2
1,510 Points

Chrome Version 37.0.2062.120 m FF 32.0

If you don't get the same result its probably on my end then. Its fine, its not a big deal. I just couldn't replicate the same functionality with the updated version of bootstrap.

bryanbarrera2
bryanbarrera2
1,510 Points
bryanbarrera2
bryanbarrera2
1,510 Points

That did the trick! Thanks