如何使用 jQuery 更改颜色框的位置？

Colorbox 是一个 jQuery 插件，它扩展了 jQuery 库以包含额外的功能。

方法：我们可以使用 top, left, right, bottom等位置参数更改 jQuery 中 colorbox 的位置。

句法：

$(element).colorbox({ 
    top: "Apx",
    left: "Bpx",
    right: "Cpx",
    bottom: "Dpx"
});

示例 1：以下示例演示了没有参数的插件。

HTML

  

    
    
  
    
    
  
    
        body {
            text-align: center;
            margin-top: 22%;
        }
    

  

    
        Click to open colorbox
    
      
    
        $('a').colorbox();
    

  

输出：

示例 2：以下示例演示 使用 left : 0px将颜色框向左移动。

HTML

  

    
    
      
    
    
  
    
        body {
            text-align: center;
            margin-top: 22%;
        }
    

  

    
        Click to open colorbox
    
      
    
        $('a').colorbox({ left: "0px" });
    

  

输出：

示例 3：以下示例演示如何使用right:0px 将颜色框向右移动。

HTML

  

    
    
  
    
    
  
    
        body {
            text-align: center;
            margin-top: 22%;
        }
    

  

    
        Click to open colorbox
    
      
    
        $('a').colorbox({ right: "0px" });
    

  

输出：

我们也可以一次使用 1 个以上的位置参数。

示例 4：以下示例演示了左上角的位置。

HTML

  

    
    
  
    
    
      
    
        body {
            text-align: center;
            margin-top: 22%;
        }
    

  

    
        Click to open colorbox
    
      
    
        $('a').colorbox({ 
            top: "0px", 
            left: "0px" 
        });
    

  

输出：