Html 如何在link press上显示弹出窗口？_Html_Css_Popup

Html 如何在link press上显示弹出窗口？

html css

Html 如何在link press上显示弹出窗口？,html,css,popup,Html,Css,Popup,我已经在这方面工作了相当长的一段时间，但没有多少结果。总之，我在教程上看到了这个漂亮的菜单，我复制了它，它是： HTML: 下面是上面源代码的结果：正如你所看到的，菜单被放置在页面的中间，我试图做的是打开菜单作为弹出，而不是作为一个新的页面，当有人点击我主页上的一个链接。此外，当弹出窗口打开时，它会模糊背景，要关闭它，用户应该单击页面上的其他地方…提前感谢我为你写了一些代码功能显示菜单（）{ document.querySelector（“.menu”）.style.display=“

我已经在这方面工作了相当长的一段时间，但没有多少结果。总之，我在教程上看到了这个漂亮的菜单，我复制了它，它是：

HTML:

下面是上面源代码的结果：

正如你所看到的，菜单被放置在页面的中间，我试图做的是打开菜单作为弹出，而不是作为一个新的页面，当有人点击我主页上的一个链接。此外，当弹出窗口打开时，它会模糊背景，要关闭它，用户应该单击页面上的其他地方…提前感谢

我为你写了一些代码

功能显示菜单（）{
document.querySelector（“.menu”）.style.display=“block”；
}
函数关闭菜单（）{
document.querySelector（“.menu”）.style.display=“无”；
}

菜单{
显示：无；
背景色：#fff；
}

打开
关闭

您必须编写自定义jQuery或Java脚本才能打开和关闭弹出窗口。@KuldipKoradia我相信您的话，但我看到其他人在使用可见性：hidden；我不知道这在这种情况下是否有用或有效；或显示：无；但在一定条件下，您必须添加一个自定义脚本，用于将类切换到主容器，并且通过使用该类，您可以隐藏和显示此弹出窗口。这都是关于基于类的条件CSStoggle@KuldipKoradia好的，很高兴知道，但即使它们可以使用，我仍然不知道如何实现它…所以，我仍然要等待答复，无论如何，谢谢。这正是我需要的，谢谢。虽然你帮了我一个忙，但我仍然想知道如何让它响应，比如在一定的宽度后，菜单的尺寸应该减小…你只需减小媒体查询中的字体大小和填充

<!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>

@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);
}