• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

232
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error