文章/答案/技术大牛

发布

css点击弹出层

基础概念

CSS点击弹出层通常是指通过CSS和JavaScript实现的一种交互效果，当用户点击某个元素时，会弹出一个覆盖在页面上的层（通常称为弹出层或模态框），用于显示额外的信息或进行交互。

类型

模态弹出层：用户必须与弹出层交互后才能继续操作。
非模态弹出层：用户可以继续操作页面其他部分，同时查看弹出层。

应用场景

表单验证
警告和确认对话框
图片或视频的放大查看
登录或注册窗口

示例代码

以下是一个简单的CSS点击弹出层的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Click Popup</title>
    <style>
        .popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            padding: 20px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
        .show {
            display: block;
        }
    </style>
</head>
<body>
    <button id="openPopup">Open Popup</button>
    <div class="overlay" id="overlay"></div>
    <div class="popup" id="popup">
        <h2>Popup Title</h2>
        <p>This is a popup message.</p>
        <button id="closePopup">Close</button>
    </div>

    <script>
        document.getElementById('openPopup').addEventListener('click', function() {
            document.getElementById('popup').classList.add('show');
            document.getElementById('overlay').classList.add('show');
        });

        document.getElementById('closePopup').addEventListener('click', function() {
            document.getElementById('popup').classList.remove('show');
            document.getElementById('overlay').classList.remove('show');
        });

        document.getElementById('overlay').addEventListener('click', function() {
            document.getElementById('popup').classList.remove('show');
            document.getElementById('overlay').classList.remove('show');
        });
    </script>
</body>
</html>

参考链接

CSS Tricks: Modal Dialogs

常见问题及解决方法

弹出层不显示：
- 确保CSS中的display: none;和JavaScript中的classList.add('show');正确使用。
- 检查是否有其他CSS规则覆盖了弹出层的显示。

弹出层位置不正确：
- 使用position: fixed;和transform: translate(-50%, -50%);来居中显示弹出层。
- 调整top和left属性来微调位置。
点击弹出层外部区域不关闭：
- 确保覆盖层（overlay）的点击事件正确绑定，并在点击时移除show类。

通过以上示例和解决方法，你应该能够实现一个基本的CSS点击弹出层，并解决常见的显示和交互问题。

页面内容是否对你有帮助？

有帮助

没帮助

如何关闭所有弹出窗口？

javascript、leaflet

我的map上有多个(444)个打开的map。$(".leaflet-popup-close-button").each(function (index) {});为什么会发生这种情况？

浏览 1提问于2016-08-27得票数 4

回答已采纳

1回答

将leaflet.js弹出移到前面

leaflet

我有一张同时打开多个弹出窗口的地图。弹出窗口包含一条tweet，用户需要快速扫描内容，因此为什么同时打开多个弹出窗口。有人成功地让弹出式窗口移到前线了吗？操作css zindex是要走的路吗？

浏览 0提问于2013-12-31得票数 1

回答已采纳

1回答

authuser=0&id=0B15UI5xGYTOadDlta2FoZ2pCc1E&export=download' ctaLayer.setMap(map); 当我点击谷歌地图中的多边形层时，弹出框就会打开。我怎样才能做到这样，当我点击第二个多边形层，弹出框，在前面选择的是自动清除，不再显示？(因为在我的情况下，前面的弹出框仍然会出现，但我不希望这种情况发生，因为如果用户选择多个多边形层，屏幕上就会出现太多

浏览 6提问于2015-05-27得票数 0

回答已采纳

1回答

将鼠标单击和鼠标切换事件附加到Bing映射不起作用的图钉上

javascript、bing-maps

我在地图上有多个引脚，每一个都有两个与它相关的事件(鼠标点击和鼠标移动)。但只有鼠标在开火，而不是点击。下面是我正在使用的代码。

浏览 4提问于2012-06-11得票数 0

1回答

Python Selenium WebDriver Chrome click()不起作用

python、selenium、webdriver

clcik_on_privkey = driver.find_element_by_xpath("//label[10]") clcik_on_privkey = driver.find_element_by_css_selector

浏览 1提问于2018-11-08得票数 1

1回答

如何在drupal中的OpenLayers地图中添加边框

drupal、openlayers

嗨，我必须在一个OpenLayers弹出窗口中添加一个边框。我找过这个，但没有找到任何关于它的文章。

浏览 7提问于2013-05-31得票数 0

1回答

如何停止光标在mapbox标记图标上的闪烁？

mapbox、mapbox-gl-js、mapbox-marker

如何停止光标在Mapbox图标上的闪烁？下面是在标记图标上悬停时可以看到问题所在的活动站点：const map = new mapboxgl.Map({ style: 'mapbox://styles/dmitrimartin/ckxtj5aur4

浏览 6提问于2022-03-06得票数 0

1回答

使用UIWebView让Objective-C与JavaScript对话

cocoa-touch、ipad、uiwebview、ios

此外，我想在html中有可点击的链接，在最高层生成新的，更小的UIWebViews，就像一个“弹出窗口”。如何在Obj-C和Javascript之间来回发送数据？

浏览 0提问于2010-09-18得票数 2

回答已采纳

2回答

关闭popOver

ios、objective-c、uitextfield、uipickerview、uipopover

当点击带有选取器的弹出窗口时，将出现其中一个文本字段。现在，当用户从弹出窗口完成时，大多数用户点击背景即可将其关闭。即使我在弹出窗口中放置了一个完成按钮，用户也不情愿地轻敲背景。所以当我点击背景时，弹出窗口消失了。但是当我想要编辑另一个文本字段时，我必须轻触它两次才能进入编辑模式。这就像当弹出画面被呈现时，在它下面有一层，当它消失时，这一层会一直停留到我第二次点击来释放它。

浏览 0提问于2013-04-10得票数 0

1回答

为什么程序对subprocess.Popen调用一个.exe而不是另一个.exe正确执行？

python、subprocess、popen

我遇到了一个问题，当我在GUI上放置一条路径时，它会打开GUI，点击就会很好。然而，当我用它代替另一个GUI的路径时，点击不会发生，但是它会打印出“已完成的单击”，显示程序确实完全执行了。然而，我很困惑，为什么这些点击没有发生。这是我的密码。

浏览 4提问于2022-01-17得票数 1

1回答

文本区域上的弹出层

mobile、mobile-website

在主页的中间有一个文本区，当用户点击一个按钮时，弹出的图层就会跳出来。如何防止这个文本区域被聚焦？

浏览 0提问于2012-04-11得票数 0

3回答

移除具有z索引位置的图层

jquery、popup、z-index

我有一个弹出窗口，在弹出窗口下面有一个空白层。空白层的z索引的数量总是比弹出窗口少一个数字。当用户点击关闭按钮在弹出，我应该删除弹出层和空白层。我可以很容易地删除弹出层，但我如何删除空白层？这是我删除弹出窗口的jQuery代码： var curZIndex = $(this).closest('.popup')

浏览 1提问于2012-05-14得票数 0

3回答

jQuery:如何避免蒙版div上的透明效果

jquery、html、css

我想使用jQuery弹出一个div层，当点击附加图片按钮，在div中有一个嵌入的div结束文件上传控制，让用户从那里的电脑选择文件。我设置了掩码div的css它工作得很好，但我发现嵌入的div也有透明的效果。即使我设置了内部div opacity=1.0，它仍然感觉像是在opcity=0.70中。

浏览 1提问于2011-09-02得票数 0

回答已采纳

1回答

MapboxGL Javascript API:显示地图上所有不工作于多层的标记的弹出

javascript、mapbox、mapbox-gl、mapbox-gl-js

我希望每一个标记都可以用自己的弹出窗口点击。但是，只有最后一个被添加的层允许用户单击这些标记并看到弹出，而前面的层被覆盖，因此这些层中的标记是不可点击的。这里是JS Fiddle (大部分代码来自网站上的两个示例，我正在尝试将它们组合在一起) 我需要这一行代码能够通过切换一个列表来过滤标记，并且我需要每个标记都可以点击。"filter": ["==", "marker-symbol", sy

浏览 4提问于2016-06-05得票数 1

回答已采纳

1回答

双击以获取DynamciLayer的弹出窗口

javascript、popup、arcgis

我有一个动态层，我想为它定义一个弹出。"http://testServer/arcgis/rest/services/TestMap/MapServer"); queryTask[activeLayer].execute(query, showResults);为什么我必须点击两次才

浏览 2提问于2013-11-09得票数 2

回答已采纳

1回答

传单弹出并不是在第一次点击时打开的

javascript、popup、leaflet

我有一个函数，它创建一个标记并将一个弹出窗口绑定到它。我希望弹出式窗口打开和关闭与一个鼠标单击。所发生的情况是弹出窗口在第一次单击时就不会打开。第二次单击和随后的所有单击完成此工作。

浏览 3提问于2017-11-24得票数 3

1回答

如何在窗口上覆盖控件？

wpf

当用户点击某个按钮时，我想把整个窗口调暗，然后在上面显示一个弹出窗口。不是真正的对话框，只是窗口里面的东西。每个控件都位于0层。transparency.My 有一个与第1层中的窗体大小相同的矩形。这有50%的弹出窗口被加载到第二层。单击该矩形上的任何位置都会执行与按下弹出窗口关闭相同的操作。这个是可能的吗？

浏览 3提问于2010-07-18得票数 6

回答已采纳

1回答