使用纯 CSS 设计关闭按钮

任务是使用Pure CSS制作关闭按钮。下面讨论两种方法。

方法 1：在另一个

中创建一个

，其中包含字母“X”，这有助于显示关闭按钮。当“X”上发生“click”事件时，则执行操作。在此示例中，外部

在事件发生时已被隐藏。

示例：此示例实现了上述方法。

  

    
        .outer {
            background: green;
            height: 60px;
            display: block;
        }
  
        .button {
            margin-left: 93%;
            color: white;
            font-weight: bold;
            cursor: pointer;
        }
    

  

      
    GeeksForGeeks
      
    
        Click on the cross to 
        hide the element.
    
      
    
        X
    
    
      
    
  
    
        var down = document.getElementById("GFG");
        var el = document.querySelector('.button');
          
        el.addEventListener('click', function () {
            var el2 = document.querySelector('.outer');
            el2.style.display = "none";
        });
    

  

输出：

方法2：这种方法使用jQuery。在另一个包含字母“X”的

中创建一个

以显示关闭按钮。当“X”上发生“Click”事件时，执行操作。在这个例子中，外部

在事件发生时被隐藏了。

示例：此示例实现了上述方法。

  

    
        .outer {
            background: green;
            height: 60px;
            display: block;
        }
  
        .button {
            margin-left: 93%;
            color: white;
            font-weight: bold;
            cursor: pointer;
        }
    
    
    

  

    
        GeeksForGeeks
    
    
        Click on the cross to 
        hide the element.
    
    
        X
    
    
    
    
  
    
        var down = document.getElementById("GFG");
        $('.button').on('click', function () {
            $('.outer').hide();
        });
    

  

输出：