如何创建弹出窗口

❮ 如何在悬停时显示元素

如何创建可折叠的 ❯

如何创建 - 弹出窗口

更新于 2024/9/3 2:44:00

了解如何使用 CSS 和 JavaScript 创建弹出窗口。

Click me to toggle the popup!

A Simple Popup!

亲自试一试 »

如何创建弹出窗口

步骤 1) 添加 HTML:

实例

步骤 2) 添加 CSS:

实例

/* 弹出容器 */

.popup { position: relative; display: inline-block; cursor: pointer;}

/* 实际弹出窗口（出现在顶部）*/

.popup .popuptext

{ visibility: hidden; width:

160px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 8px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%;

margin-left: -80px;}

/* 弹出箭头 */

.popup .popuptext::after { content: "";

position: absolute;

top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid;

border-color: #555 transparent

transparent transparent;}

/* 单击弹出容器时切换此类（隐藏和显示弹出窗口）*/

.popup .show {

visibility: visible; -webkit-animation:

fadeIn 1s; animation: fadeIn 1s}

/* 添加动画（在弹出窗口中淡入） */

@-webkit-keyframes fadeIn {

from {opacity: 0;} to {opacity: 1;}}

@keyframes fadeIn { from {opacity: 0;}

to {opacity:1 ;}}

步骤 3) 添加 JavaScript:

实例

亲自试一试 »

相关页面

提示:工具提示类似于弹出窗口。 转到我们的如何创建工具提示教程了解工具提示。

提示:模态框也类似于弹出窗口。 转到我们的如何创建模态教程了解模态。

❮ 如何在悬停时显示元素

如何创建可折叠的 ❯