How to make a click popup window using javascript?

Question

I want to make a button that can pop up a window when the button is clicked~

But when the window pops up, click the green menu, the menu will not disappear, only click again or any blank space around the menu! The

menu will be closed again, but I I wrote a judgment why this function cannot be realized? I hope to get your help, thank you.

const el = document.querySelector('.click')
const menu = document.querySelector('.menu');

el.onclick = function() {
  menu.classList.toggle("showmenu");
}

window.onclick = function(e) {
  if (!e.classList.contains('menu') || !e.classList.contains('menu_item')) {
    menu.removeClass('showmenu');
  }
}

.click {
  background-color: yellow;
  padding: 20px;
}

.menu {
  display: inline-block;
  background-color: green;
  list-style-type: none;
  display: none;
}

.menu a {
  text-decoration: none;
  color: #fff;
  padding: 30px;
  font-size: 20px;
}

.showmenu {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="click">click</button>
<ul class="menu">
  <li class="menu_item"><a href="#">item1</a></li>
  <li class="menu_item"><a href="#">item2</a></li>
  <li class="menu_item"><a href="#">item3</a></li>
</ul>

Spectric · Accepted Answer · 2022-03-02 03:53:44Z

1

Few problems:

Your global click event listener is trying to get the classList property of the event, which doesn't exist. You should instead be getting the target of the event, which is retrieved through the target property.
There is no removeClass method. Use classList.remove instead.
Call Event.stopPropagation in the click event listener binded to .click, so the global click event listener will not handle the event (otherwise it will close the menu immediately after it was opened).

const el = document.querySelector('.click')
const menu = document.querySelector('.menu');

el.onclick = function(e) {
  menu.classList.toggle("showmenu");
  e.stopPropagation();
}

window.onclick = function(e) {
  if (!menu.contains(e.target)) {
    menu.classList.remove('showmenu');
  }
}

.click {
  background-color: yellow;
  padding: 20px;
}

.menu {
  display: inline-block;
  background-color: green;
  list-style-type: none;
  display: none;
}

.menu a {
  text-decoration: none;
  color: #fff;
  padding: 30px;
  font-size: 20px;
}

.showmenu {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="click">click</button>
<ul class="menu">
  <li class="menu_item"><a href="#">item1</a></li>
  <li class="menu_item"><a href="#">item2</a></li>
  <li class="menu_item"><a href="#">item3</a></li>
</ul>

edited Mar 2, 2022 at 3:53

answered Mar 2, 2022 at 3:30

Spectric

32.6k6 gold badges32 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

AWEI Over a year ago

First of all thank you for your attentive reply, but how to describe my problem! I hope that the menu will disappear only if you click click again and outside the menu, but now your code seems to click the menu, that is, the green block will also make the menu disappear?

Spectric Over a year ago

@AWEI I've updated my answer. It should work now. Sorry for the delay :)

Spectric Over a year ago

@zer00ne They do. The href attribute is simply set to #.

zer00ne Over a year ago

Ah! derp!!!! 😄

AWEI Over a year ago

Haha~ I only put # in the right menu because it's just for stating the problem

|

zer00ne · Accepted Answer · 2022-03-02 04:11:01Z

The jQuery method .removeClass() was used on a plain JavaScript object (ie menu). In the example .classList.remove() was used instead. If you want to use .removeClass() instead, you must convert menu into a jQuery object const menu = $('.menu') then menu.removeClass('showmenu') will work.

Also, I changed the CSS a little to stop the button from jumping and to tame those links -- they bled from the menu's percieved borders. The CSS of course is not a requirement of solution.

Solution

Make all of the event handlers into a single event handler and delegate behavior with control flow statements, Event.target property, and .matches() method. The following uses the programming paradigm called event delegation.

const btn = document.querySelector('.click')

document.body.onclick = popUp;

function popUp(e) {
  const clicked = e.target;
  const menu = document.querySelector('.menu');

  if (clicked.matches('.click')) {
    menu.classList.toggle("showmenu");
  } else if (!clicked.matches('.click') && !clicked.matches('.menu')) {
    menu.classList.remove('showmenu');
  } else return false;
}

body {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.click {
  background-color: yellow;
  padding: 20px;
}

.menu {
  display: none;
  background-color: green;
  list-style-type: none;
}

.menu a {
  display: block;
  text-decoration: none;
  color: #fff;
  padding: 5px;
  font-size: 20px;
}

.showmenu {
  display: inline-block;
}

<button type="button" class="click">click</button>
<ul class="menu">
  <li class="menu_item"><a href="/#">item1</a></li>
  <li class="menu_item"><a href="/#">item2</a></li>
  <li class="menu_item"><a href="/#">item3</a></li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Collectives™ on Stack Overflow

How to make a click popup window using javascript?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related