추가 기능을 사용하여 jQuery 플러그인에서 오버레이 만들기

Question

오버레이를 만들어 색조 효과를 만들 수있는 작은 jQuery 플러그인을 만들려고합니다. 이 오버레이를 만들려면 일반 js & jQuery를 사용하는 것만으로도 충분히 간단하지만 jQuery 플러그인으로 모두 마무리하려고하면 append (및 appendTo)가 함수가 아닌 오류 메시지가 나타납니다. 플러그인은 내가 append 대신 extend를 사용하면 작동하지만, div 나 object에 대해 실제 오버레이를 만들고 싶을 때 단순히 기존의 CSS 코드를 변경하는 것입니다.

(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

난 당신이 $.extend (하지 $.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>