如何在点击 div 时在电子 js 中打开菜单

Question

我制作了一个自定义标题栏应用程序，然后我也给了它一个file 菜单。（电子）

现在我想在单击此菜单时打开一个菜单。我想要一个弹出窗口，但弹出窗口不应该是菜单的标准窗口弹出窗口，我也想自定义...但是如果需要太多时间，创建一个新窗口会变得非常乏味。

很可能我想实例化一个部分，但我不知道该怎么做

现状

我有一个带有#container div 的窗口，该窗口有一个#buttons div，其中有3 个#minimize、#maximize、#close，每个都有一个span

#buttons 也有 2 个 div .menu1 和 .menu2 我希望这些菜单在文件和编辑菜单等窗口中表现得像普通菜单一样

    <div id="container">
        <nav>
        <div id="buttons">
          <div id="file">
            <span class = "menu1">file</span>  
          </div>
          <div id="about_us">
            <span class = "menu2">about..us</span>
          </div>
          <div id="minimize" onclick="min()">
            <span>-</span>
          </div>
          <div id="maximize" onclick="max()">
            <span>+</span>
          </div>
          <div id="close" onclick="uff()">
            <span>&times;</span>
          </div>
        </div>
      </nav>
    </div>

结果是

所有的菜单和按钮都是可点击的并且有悬停颜色

Answer 1

在这里你需要做这样的事情：

1. 在 html 和 css 中创建弹出窗口。使用位置：绝对；和 z-index 让它覆盖应用程序的其余部分。

2. 然后使用 css 类隐藏弹出窗口，例如 .hide，将弹出窗口设置为 display: none;。

3. 您现在需要一小段 javascript 来切换 .hide 类。例如像这样的函数：const togglePopup = () => document.querySelector('.popup').classList.toggle('hide')

4. 通过单击您的元素之一触发 togglePopup 脚本：

   const trigger = document.querySelector('#idOrClassOfTriggerElement')

   trigger.addEventListener('click', () => togglePopup()

5. 使用相同类型的技术添加关闭弹出窗口的方法 - 将事件监听器添加到触发器元素（例如 X 图标）并调用与 #3 中相同的切换函数。

希望这是您想要实现的目标。

编辑：弹出覆盖的示例代码：

const popup = document.querySelector('.popup')
const closeBtn = document.querySelector('.popup-close')
const openBtn = document.querySelector('.open')
const body = document.querySelector('body')

const showPopup = () => {
  popup.classList.add('fade-in')
  body.classList.add('scroll-stop')
}

const hidePopup = () => {
  popup.classList.remove('fade-in')
  popup.classList.add('fade-out')
  body.classList.remove('scroll-stop')
  setTimeout(() => {
    popup.classList.remove('fade-out')
  }, 500)
    body.focus();
}

openBtn.addEventListener('click', showPopup)
closeBtn.addEventListener('click', hidePopup)

.popup {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fefefe;
  z-index: 9;
  opacity: 0;
  pointer-events: none;
  overflow: scroll;
}

.popup-inner {
  width: 100%;
  position: relative;
  padding: 6% 16% 0;
}

.popup-close {
  position: relative;
  z-index: 10;
  text-align: center;
  color: #aaa;
  font-size: 4rem;
  cursor: pointer;
  position: fixed;
  right: 3%;
  top: 3%;
}

.popup-close::before {
  content: "\00d7";
}

.popup-close:hover::before {
  color: #000;
  transition: 0.6s all ease-in;
}

.open {
  text-align: center;
  cursor: pointer;
  background: transparent;
  padding: 1rem 2rem;
  border: 2px solid;
  border-radius: 6px;
  color: #000;
  font-weight: bold;
  position: absolute;
  top: 25%;
  left: 44%;
}

.open:hover {
  background: #ffffff18;
}

.fade-in {
  opacity: 1;
  pointer-events: unset;
  transition: 0.3s all ease;
}

.fade-out {
  opacity: 0;
  pointer-events: none;
  transition: 0.3s all ease;
}

.background {
  height: 100vh;
  width: 100vw;
  background: olive;
  margin: 0;
  padding: 0;
}

<div class="background">
  <button class="open">OPEN POPUP</a>
</div>


<!-- Add popup at the bottom of the html document, before </body> -->
<div class="popup" role="dialog" aria-label="Popup">
  <div class="popup-close" role="button" arial-label="Close popup" tabindex="1"></div>
  <div class="popup-inner">
    <h2>This is a popup title</h3>
      <p>Popup content...</p>
  </div>
</div>