Using append to create an overlay in a jQuery plugin

Question

I am trying to make a small jQuery plugin that is able to create an overlay to create a tinting effect. To create this overlay is simple enough using plain js & jQuery, but when I try to wrap it all up into a jQuery plugin I get the error message that append (and appendTo) are not functions. The plugin works if I use extend instead of append, but the it is simply changing the existing css code, while I want to create an actual overlay over any div or object.

(function ($) {

  $.fn.tint = function( options )
    {
      var overlay = $.append(
        {
          backgroundColor: "black",
          opacity: 0.5,
          width: "100%",
          height: "100%",
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          //"z-index": 1000,
        }, options
      );
      return this.css(
        {
          backgroundColor: overlay.backgroundColor,
          opacity: overlay.opacity,
          width: overlay.width,
          height: overlay.height,
          position: overlay.position,
          top: overlay.top,
          left: overlay.left,
          right: overlay.right,
          bottom: overlay.bottom,
          //z-index: overlay.z-index,
        }
      );
    }
} ( jQuery ));

Answer 1

I guess you are trying to do $.extend (not $.append ):

 (function ($) { $.fn.tint = function( options ) { if($(this).find(".overlay").length > 0) return $(this); var overlay = $.extend({ backgroundColor: "black", opacity: 0.5, width: "100%", height: "100%", position: "absolute", top: 0, left: 0, right: 0, bottom: 0, //"z-index": 1000, }, options); $("<div class='overlay'>").css( { backgroundColor: overlay.backgroundColor, opacity: overlay.opacity, width: overlay.width, height: overlay.height, position: overlay.position, top: overlay.top, left: overlay.left, right: overlay.right, bottom: overlay.bottom, //z-index: overlay.z-index, } ).appendTo(this); return $(this); } } ( jQuery )); $(".overlay-target").on("click", function(){ $(this).tint({backgroundColor: "green"}); }); 

 .overlay-target { border: 1px solid red; margin: 20px; padding: 50px; position: relative; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='overlay-target'>I want an overlay</div>