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

JavaScript

Posted by Daniele Manca
Daniele Manca
10,986 Points

Open table reservation widget problem

Hi folks,

On this project I am trying to implement the open table reservation widget inside of a modal window, which you can see by clicking on the Book Now button.

http://bradleys.hostings.co.uk/

Now the issue is with the widget, because it should open up as an overlay, however I think that there might be some js conflict,

If anyone has any idea would be great, thanks.

1 Answer

jobbol
seal-mask
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 19,117 Points
jobbol
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 19,117 Points

Okay so this is your js and the paste below is what you're using to open up your widget?

// Open table modal window functionality
      var $modalBtn = $('#modalButton');
      var $overlay = $('#modal');
      var $close = $('#close');

      $modalBtn.on('click', function (e) {
        e.preventDefault();
        $overlay.show();
        $('body').addClass('no-scroll');
      });

       $close.on('click', function (e) {
        e.preventDefault();
        $overlay.hide();
        $('body').removeClass('no-scroll');
      });

      jQuery('#modal.overlay').click(function() { jQuery('#modal').hide(); });

The steps in the code seems to be right. However, I can't seem to find where the overlay creation exists. So I did a log on #modalBtn, #modal, and #close.

console stuff

Guessing you forgot to put that in there.