Last Two modal windows not working correctly

Design help General
1

i am 100% sure that i set up the modal windows correctly with the code in the dashboard and with the correct ids in the webflow editor. the last two on the bottom of the page doesn’t work right. the bottom left one opens but doesn’t let you close it. the bottom right one doesn’t open at all

please help!

here’s my code just in case:

<!-- art glass Modal Window Popup -->
<script type="text/javascript">

$(document).ready(function () {
  $('.art-glass').click(function () {
    $('.art-glass-modal-background').fadeIn();
    return false;
  });
  $('.art-glass-close').click(function () {
    $('.art-glass-modal-background').fadeOut();
    return false;
  });
  if (location.hash == '#art-glass') {
    $('.art-glass-modal-background').fadeIn();
  }
});

</script>  

<!-- before and after Modal Window Popup -->
<script type="text/javascript">

$(document).ready(function () {
  $('.before').click(function () {
    $('.before-modal-background').fadeIn();
    return false;
  });
  $('.before-close').click(function () {
    $('.before-modal-background').fadb
  });
  if (location.hash == '#before-and-after') {
    $('.before-modal-background').fadeIn();
  }
});

</script>  

<!-- display Modal Window Popup -->
<script type="text/javascript">

$(document).ready(function () {
  $('.display').click(function () {
    $('.display-modal-background').fadeIn();
    return false;
  });
  $('.display-close').click(function () {
    $('.display-modal-background').fadeOut();
    return false;
  });
  if (location.hash == '#display') {
    $('.display-modal-background').fadeIn();
  }
});

</script>  

<!-- kitchens Modal Window Popup -->
<script type="text/javascript">

$(document).ready(function () {
  $('.kitchens').click(function () {
    $('.kitchens-modal-background').fadeIn();
    return false;
  });
  $('.kitchens-close').click(function () {
    $('.kitchens-modal-background').fadeOut();
    return false;
  });
  if (location.hash == '#kitchens') {
    $('.kitchens-modal-background').fadeIn();
  }
});

</script>  

<!-- antiques Modal Window Popup -->
<script type="text/javascript">

$(document).ready(function () {
  $('.antique').click(function () {
    $('.antiquebg').fadeIn();
    return false;
  });
  $('antiqueclose').click(function () {
    $('.antiquebg').fadeOut();
    return false;
  });
  if (location.hash == '#antiques') {
    $('.antiquebg').fadeIn();
  }
});

</script>  

<!-- bathrooms Modal Window Popup -->
<script type="text/javascript">

$(document).ready(function () {
  $('.bathrooms').click(function () {
    $('.bathrooms-modal-background').fadeIn();
    return false;
  });
  $('.bathrooms-close').click(function () {
    $('.bathrooms-modal-background').fadeOut();
    return false;
  });
  if (location.hash == '#bathrooms') {
    $('.bathrooms-modal-background').fadeIn();
  }
});

</script>  

<!-- bars Modal Window Popup -->
<script type="text/javascript">

$(document).ready(function () {
  $('.bar').click(function () {
    $('barbg').fadeIn();
    return false;
  });
  $('.barclose').click(function () {
    $('.barbg').fadeOut();
    return false;
  });
  if (location.hash == '#bars-and-fireplaces') {
    $('.barbg').fadeIn();
  }
});

</script>  

<!-- furniture Modal Window Popup -->
<script type="text/javascript">

$(document).ready(function () {
  $('.furniture').click(function () {
    $('.furniture-modal-background').fadeIn();
    return false;
  });
  $('.furniture-close').click(function () {
    $('.furniture-modal-background').fadeOut();
    return false;
  });
  if (location.hash == '#furniture') {
    $('.furniture-modal-background').fadeIn();
  }
});

</script>  

<!-- landscapes Modal Window Popup -->
<script type="text/javascript">

$(document).ready(function () {
  $('.landscapes').click(function () {
    $('.landscapes-modal-background').fadeIn();
    return false;
  });
  $('.landscapes-close').click(function () {
    $('.landscapes-modal-background').fadeOut();
    return false;
  });
  if (location.hash == '#landscapes') {
    $('.landscapes-modal-background').fadeIn();
  }
});

</script>

<!-- cool stuff Modal Window Popup -->
<script type="text/javascript">

$(document).ready(function () {
  $('.cool-stuff').click(function () {
    $('.cool-stuff-modal-background').fadeIn();
    return false;
  });
  $('.cool-stuff-close').click(function () {
    $('.cool-stuff-modal-background').fadeOut();
    return false;
  });
  if (location.hash == '#cool-stuff') {
    $('.cool-stuff-modal-background').fadeIn();
  }
});

</script>
2

Hi, I see at least one syntax issue:

$('.before-modal-background').fadb

Line is having invalid jquery function and also line need semi-colon;

Not sure if that is the issue, but it is one problem from the code you pasted.

3

so add a semi-colon after the ‘fadb’?

4

Well, you probably want to change it to:

$('.before-modal-background').fadeOut();

Cheers, Dave

5

thank you :smiley: really appreciate it