• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

228
Vistas
How does jquery modify the program to achieve that when the button is clicked, it can be opened and clicked again to close?

I implemented a click tool to pop up a window, click inside the window to close the window, click outside to close the window! But I encountered a difficulty, that is, if according to the way I currently write, I want to click the tool again to close the window, and it seems that this requirement cannot be achieved!

I don't know how to change the code in this way, so that the window can be closed by clicking the tool?

Hope to get your help, I will be very grateful to everyone who helped me.

const className = ['delet_wrap', 'txt', 'btn_group', 'consider', 'confirm', 'tool'];

$('.tool').on('click', function(e) {
  $(document).on('click', function(e) {
    if (className.includes(e.target.className)) {
      $('.delet_wrap').css('display', 'inline-block');
    } else {
      $('.delet_wrap').css('display', 'none');
    }
  })
})
body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.tool {
  position: relative;
  text-decoration: none;
  background-color: yellow;
  border: 1px solid #222;
  border-radius: 6px;
  padding: 10px;
  color: #222;
}

.tool .delet_wrap {
  padding: 20px;
  position: absolute;
  bottom: -90px;
  left: 10px;
  background-color: #ccc;
  border: 1px solid #222;
  display: none;
  z-index: 10;
}

.tool .delet_wrap p {
  text-align: center;
}

.tool .delet_wrap .btn_group {
  display: flex;
  white-space: nowrap;
  margin-top: 10px;
}

.tool .delet_wrap .btn_group .consider {
  background-color: #fff;
  border: 1px solid #222;
  margin-right: 10px;
}

.tool .delet_wrap .btn_group .confirm {
  text-decoration: none;
  border: 1px solid #222;
  margin-left: 10px;
  background-color: #222;
  color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:;" class="tool">tool
    <div class="delet_wrap" id="js-delet_wrap">
      <p class="txt">Are you sure you want to close?</p>
      <div class="btn_group">
        <button class="consider">consider</button>
        <button class="confirm">confirm</button>
      </div>
    </div>
</a>

almost 3 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda