Buying Simple JavaScript Work - $15

Hi All,

I need a quick thing done in JavaScript. It should not take long at all. I need these two edited for correct syntax/proper code use and combined together.

This is a combination of JQuery and JavaScript (as you might be able to tell I suck at it):

window.onload =  function(){

    var body = document.body,
        mask = document.createElement("div"),
        wrapper = document.querySelector( ".wrapper" )
    ;
    mask.className = "mask";

    jQuery("button.menu-toggle").click( function(){
        classie.add( body, activeID );
        classie.add( body, "masked" );
        wrapper.appendChild(mask);
    } );

    mask.addEventListener( "click", function(){
        classie.remove( body, activeID );
        classie.remove( body, "masked" );
        activeID = "";
        wrapper.removeChild(mask);
    } );
};

Code (JavaScript):

As well I am looking to combine this into that code as well:

jQuery(document).ready(function($){
   
    var maskWhite =  ("<div class='mask mask-white js-modal-close'></div>"),
    modalBox;
   
      $('a[data-popup-id]').click(function(e) {
        e.preventDefault();
        $(".wrapper").append(maskWhite);
        $("body").addClass("masked");
        $(".mask").fadeTo(500, 1);
        //$(".js-modalbox").fadeIn(500);
        modalBox = $(this).attr('data-popup-id');
        $('#'+modalBox).fadeIn($(this).data());
      }); 
     
     
    $(".js-modal-close ").click(function(e) {
        $(".modal-box, .modal-overlay").fadeOut(500, function() {
            $(".modal-overlay").remove();
        });
        $("body").addClass("popup-open");
    });
    
    $(window).resize(function() {
      $(".modal-box").css({
        top: ($(window).height() - $(".modal-box").outerHeight()) / 2,
        left: ($(window).width() - $(".modal-box").outerWidth()) / 2
      });
    });
    
    $(window).resize();
});

Code (JavaScript):

The first script is a mobile-menu that slides in from the left and the second is supposed to be a simple modal box that pops up as needed for different events (hence the [data-popup-id]). The problem I am having is that when I open the mask from the second block of code and click on it, it for some reason does not close.

The first person that can correctly reply to this thread with the correct syntax, combined code in one language (I am assuming Javascript would be easiest) that will allow both to work will be given the $15 via paypal. I will be checking each entry in order.

Best Wishes.

 

Maybe it's not just a matter of script. If you PM me your HTML/CSS I will be able to fix the issue in about 15 minutes.

 

$(".js-modal-close ").click(function(e) {
        $(".modal-box, .modal-overlay").fadeOut(500, function() {
            $(".modal-overlay").remove();
        });
        $("body").addClass("popup-open");
    });

Code (markup):

your missing a remove here.

this should solve your problem.

$(".js-modal-close ").click(function(e) {
        $(".mask-white").remove();
        $(".modal-box, .modal-overlay").fadeOut(500, function() {
            $(".modal-overlay").remove();
        });
        $("body").addClass("popup-open");
    });

Code (markup):

 

So I updated the code to this:

jQuery(document).ready(function($){
   
    var maskWhite =  ("<div class='mask mask-white js-modal-close'></div>"),
    modalBox;
   
      $('a[data-popup-id]').click(function(e) {
        e.preventDefault();
        $(".wrapper").append(maskWhite);
        $("body").addClass("popup-open");
        $(".mask").fadeTo(500, 1);
        //$(".js-modalbox").fadeIn(500);
        modalBox = $(this).attr('data-popup-id');
        $('#'+modalBox).fadeIn($(this).data());
      }); 
     
     
    $(".js-modal-close, .mask").click(function(e) {
        $(".modal-box, .mask").fadeOut(500, function() {
            $(".mask").remove();
        });
        $("body").removeClass("popup-open");
    });
    
    $(window).resize(function() {
      $(".modal-box").css({
        top: ($(window).height() - $(".modal-box").outerHeight()) / 2,
        left: ($(window).width() - $(".modal-box").outerWidth()) / 2
      });
    });
    
    $(window).resize();
});

Code (JavaScript):

Still nothing. It opens just fine. Just never closes.