La tarea es hacer el botón de cerrar usando Pure CSS . Hay dos enfoques que se analizan a continuación.
Enfoque 1: Cree un <div> dentro de otro <div> que tenga el alfabeto ‘X’ que ayuda a mostrar el botón de cierre . Cuando se produzca el evento de «clic» en ‘X’, realice la operación. En este ejemplo, el <div> externo se ha ocultado cuando ocurre el evento.
Ejemplo: Este ejemplo implementa el enfoque anterior.
html
<!DOCTYPE HTML>
<html>
<head>
<style>
.outer {
background: green;
height: 60px;
display: block;
}
.button {
margin-left: 93%;
color: white;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body style="text-align:center;">
<h1>GeeksForGeeks</h1>
<p>
Click on the cross to
hide the element.
</p>
<div class="outer">
<div class="button">X</div>
</div>
<br>
<p id="GFG"></p>
<script>
var down = document.getElementById("GFG");
var el = document.querySelector('.button');
el.addEventListener('click', function () {
var el2 = document.querySelector('.outer');
el2.style.display = "none";
});
</script>
</body>
</html>
Producción:
Enfoque 2: jQuery se usa en este enfoque. Cree un <div> dentro de otro <div> que contenga el alfabeto ‘X’ para mostrar el botón de cierre . Cuando se produzca el evento «Click» en ‘X’, realice la operación. En este ejemplo, el <div> externo se ha ocultado cuando ocurre el evento.
Ejemplo: Este ejemplo implementa el enfoque anterior.
html
<!DOCTYPE HTML>
<html>
<head>
<style>
.outer {
background: green;
height: 60px;
display: block;
}
.button {
margin-left: 93%;
color: white;
font-weight: bold;
cursor: pointer;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style="text-align:center;">
<h1>
GeeksForGeeks
</h1>
<p>
Click on the cross to
hide the element.
</p>
<div class="outer">
<div class="button">X</div>
</div>
<br>
<p id="GFG">
</p>
<script>
var down = document.getElementById("GFG");
$('.button').on('click', function () {
$('.outer').hide();
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA