0

I have a UI that has a couple of modals (open by default). I want to be able to close them when clicking a child element. There are then 2 separate links that can reopen the modals if they've been closed.

My close button uses a pseudo class like this .hgroup:after.

I haven't been able to get this to work, is it possible to trigger a click event on a before/after pseudo element? Or will I need to rework my markup to include a physical button or link?

Thanks in advance!

const finder = document.querySelector('.finder');
const closeBtn = document.querySelector('.hgroup:after');
    
closeBtn.addEventListener("click", function() {
    finder.classList.add('hidden');
});

const openAbout = document.querySelector('.desktop-icon__about');
const openGallery = document.querySelector('.desktop-icon__gallery');
const finderAbout = document.querySelector('.finder--about');
const finderGallery = document.querySelector('.finder--gallery');
    
openAbout.addEventListener("click", function() {
    finderAbout.classList.remove('hidden');
});

openGallery.addEventListener("click", function() {
    finderGallery.classList.remove('hidden');
});
.finder {
  background: #eee;
  height: 100px;
  margin-bottom: 12px;
  width: 200px;
}

finder.hidden {
  display: none;
}

.hgroup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 0 4px;
}

.hgroup:after {
  background: red;
  content: "";
  display: flex;
  height: 10px;
  cursor: pointer;
  width: 10px;
}

.desktop-icon {
  margin-right: 8px;
}
<div class="desktop-group">
  <a href="#" class="desktop-icon desktop-icon__about">
    <span class="desktop-icon__label" contenteditable="true" spellcheck="false">Open About</span>
  </a>
  <a href="#" class="desktop-icon desktop-icon__gallery">
    <span class="desktop-icon__label" contenteditable="true" spellcheck="false">Open Gallery</span>
  </a>
</div>

<hr />

<div class="grid__item finder finder--about">
  <div class="hgroup">About Box</div>
</div>

<div class="grid__item finder finder--gallery">
  <div class="hgroup">Gallery Box</div>
</div>
user1406440
  • 1,329
  • 2
  • 24
  • 59
  • 1
    Only possible if you calculate the approximate mouse position. ::after and ::before pseudos cannot register per-se Events. – Roko C. Buljan Jan 07 '23 at 16:16
  • 1
    The best would be to designate some proper accessible `` that does the job. – Roko C. Buljan Jan 07 '23 at 16:17
  • Ah damn! That’s ok, I can rework the markup. It’s an old Mac OS UI, originally I just put a square where the close was as I wasn’t sure I’d have open/close – user1406440 Jan 07 '23 at 16:27
  • Out of interest will that close JS work and just target the parent? Or just the first instance of `.Finder`? Just popped out so on phone and can’t test haha – user1406440 Jan 07 '23 at 16:28
  • 1
    Your approach was wrong because you use classes but anyways you created JS for every single handler, instead take this approach using data-* attributes and element IDs: https://jsfiddle.net/RokoCB/bthoc90g/ Enjoy. – Roko C. Buljan Jan 07 '23 at 17:48

0 Answers0