如何在 link 按下时显示弹出窗口？

Question

我已经为此工作了很长一段时间，但没有太多结果。不管怎样，我在教程上看到了这个不错的菜单，我复制了它，这里是：

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Menu List</title>
    <link rel="stylesheet" type="text/css" href="../CSS/checklist_menu_style.css">
</head>
<body>
    <div class="menu">
        <h2>Our Menu</h2>
        <ul>
            <li>
                <label>
                    <input type="checkbox" name="">
                    <span class="icon"></span>
                    <span class="list">Fried Fish With Souce</span>
                </label>
            </li>
            <li>
                <label>
                    <input type="checkbox" name="">
                    <span class="icon"></span>
                    <span class="list">Fresh Traditional Cod And Chips</span>
                </label>
            </li>
            <li>
                <label>
                    <input type="checkbox" name="">
                    <span class="icon"></span>
                    <span class="list">Old Fashioned Rice Balls</span>
                </label>
            </li>
            <li>
                <label>
                    <input type="checkbox" name="">
                    <span class="icon"></span>
                    <span class="list">Italian Spaghetti</span>
                </label>
            </li>
            <li>
                <label>
                    <input type="checkbox" name="">
                    <span class="icon"></span>
                    <span class="list">Spinach Salad</span>
                </label>
            </li>
            <li>
                <label>
                    <input type="checkbox" name="">
                    <span class="icon"></span>
                    <span class="list">Spicy Egg Special</span>
                </label>
            </li>
            <li>
                <label>
                    <input type="checkbox" name="">
                    <span class="icon"></span>
                    <span class="list">Chicken Tikka</span>
                </label>
            </li>
            <li>
                <label>
                    <input type="checkbox" name="">
                    <span class="icon"></span>
                    <span class="list">Chocolate Chou With Strawberry</span>
                </label>
            </li>
        </ul>
    </div>
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css?family=Poppins');
body
{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: 'Poppins', sans-serif;
}


h2
{
    margin: 0;
    padding: 10px 20px;
    background: #000;
    color: #fff;
    font-size: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

ul
{
    margin: 0;
    padding: 10px 20px;
    border: 1px dashed rgba(0,0,0,0.5);
    border-top: none;
}

ul li
{
    list-style: none;
    padding: 5px 0; 
    font-size: 16px;
}

ul li input[type="checkbox"]
{
    display: none;
}

ul li span.list
{
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0 5px;
    transition: 0.25s;
    transition-delay: 0.25s;
}

ul li input[type="checkbox"]:checked ~ span.list
{
    color: #ccc;
    transition-delay: 0s;
}

ul li span.list:before
{
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    background: #ff3663;
    width: 100%;
    height: 100%;
    transition: 0.25s;
    transition-delay: 0.25s;
}

ul li input[type="checkbox"]:checked ~ span.list:before
{
    left: 100%;
    transition-delay: 0s;
}

ul li span.list:after
{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    background: #000;
    width: 100%;
    height: 2px;
    transform-origin: left;
    transform: scaleX(0);
    transition: 0.25s;
    transition-delay: 0s;
}

ul li input[type="checkbox"]:checked ~ span.list:after
{
    transform: scaleX(1);
    transition-delay: 0.25s;
}

ul li span.icon
{
    position: relative;
    top: -3px;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 1px solid #262626;
    display: inline-block;
    margin-right: 2px;
    overflow: hidden;
}

ul li span.icon:before
{
    content: 'x';
    position: absolute;
    top: -5px;
    left: 4px;
    transform: translateY(-100%);
    transition: 0.25s;
}

ul li input[type="checkbox"]:checked ~ span.icon:before
{
    transform: translateY(0);
}

这是上面源代码的结果：

如您所见，菜单被保留在页面中间，我想做的是，当有人点击时，仅将菜单作为弹出窗口打开，而不是作为新页面打开link 在我的主页上。此外，它应该在弹出窗口打开和关闭时模糊背景，用户应单击页面上的其他位置...提前致谢！

Answer 1

我为你写了一些代码

function showMenu() {
  document.querySelector(".menu").style.display = "block";
}
function closeMenu() {
  document.querySelector(".menu").style.display = "none";
}

.menu {
  display: none;
  background-color:#fff;
}

<button class="open-menu" onclick="showMenu()">Open</button>
 <button class="open-menu" onclick="closeMenu()">Close</button>

您必须将其属性显示为 none。然后在一个按钮上单击它会出现，在另一个按钮上单击它会消失。这是它的外观

function showMenu() {
  document.querySelector(".menu").style.display = "block";
}
function closeMenu() {
  document.querySelector(".menu").style.display = "none";
}

@import url('https://fonts.googleapis.com/css?family=Poppins');
body
{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: 'Poppins', sans-serif;
  background-color: green;
}

.menu {
  display: none;
  background-color:#fff;
}


h2
{
    margin: 0;
    padding: 10px 20px;
    background: #000;
    color: #fff;
    font-size: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

ul
{
    margin: 0;
    padding: 10px 20px;
    border: 1px dashed rgba(0,0,0,0.5);
    border-top: none;
}

ul li
{
    list-style: none;
    padding: 5px 0; 
    font-size: 16px;
}

ul li input[type="checkbox"]
{
    display: none;
}

ul li span.list
{
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0 5px;
    transition: 0.25s;
    transition-delay: 0.25s;
}

ul li input[type="checkbox"]:checked ~ span.list
{
    color: #ccc;
    transition-delay: 0s;
}

ul li span.list:before
{
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    background: #ff3663;
    width: 100%;
    height: 100%;
    transition: 0.25s;
    transition-delay: 0.25s;
}

ul li input[type="checkbox"]:checked ~ span.list:before
{
    left: 100%;
    transition-delay: 0s;
}

ul li span.list:after
{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    background: #000;
    width: 100%;
    height: 2px;
    transform-origin: left;
    transform: scaleX(0);
    transition: 0.25s;
    transition-delay: 0s;
}

ul li input[type="checkbox"]:checked ~ span.list:after
{
    transform: scaleX(1);
    transition-delay: 0.25s;
}

ul li span.icon
{
    position: relative;
    top: -3px;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 1px solid #262626;
    display: inline-block;
    margin-right: 2px;
    overflow: hidden;
}

ul li span.icon:before
{
    content: 'x';
    position: absolute;
    top: -5px;
    left: 4px;
    transform: translateY(-100%);
    transition: 0.25s;
}

ul li input[type="checkbox"]:checked ~ span.icon:before
{
    transform: translateY(0);
}

<body>
    <button class="open-menu" onclick="showMenu()">Open</button>
    <div class="menu">
        <h2>Our Menu</h2>
        <ul>
            <li>
                <label>
                    <input type="checkbox" name="">
                    <span class="icon"></span>
                    <span class="list">Fried Fish With Souce</span>
                </label>
            </li>
            <li>
                <label>
                    <input type="checkbox" name="">
                    <span class="icon"></span>
                    <span class="list">Fresh Traditional Cod And Chips</span>
                </label>
            </li>
            <li>
                <label>
                    <input type="checkbox" name="">
                    <span class="icon"></span>
                    <span class="list">Old Fashioned Rice Balls</span>
                </label>
            </li>
            <li>
                <label>
                    <input type="checkbox" name="">
                    <span class="icon"></span>
                    <span class="list">Italian Spaghetti</span>
                </label>
            </li>
            <li>
                <label>
                    <input type="checkbox" name="">
                    <span class="icon"></span>
                    <span class="list">Spinach Salad</span>
                </label>
            </li>
            <li>
                <label>
                    <input type="checkbox" name="">
                    <span class="icon"></span>
                    <span class="list">Spicy Egg Special</span>
                </label>
            </li>
            <li>
                <label>
                    <input type="checkbox" name="">
                    <span class="icon"></span>
                    <span class="list">Chicken Tikka</span>
                </label>
            </li>
            <li>
                <label>
                    <input type="checkbox" name="">
                    <span class="icon"></span>
                    <span class="list">Chocolate Chou With Strawberry</span>
                </label>
            </li>
        </ul>
    </div>
      <button class="open-menu" onclick="closeMenu()">Close</button>
</body>

也可以在菜单右上角做一个link绝对定位关闭

如何在 link 按下时显示弹出窗口？

How to show a Pop-UP on link press?

html

css

popup