如何创建：弹出窗口

如何创建弹出窗口

第一步 - 添加 HTML：

第二步 - 添加 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 ;}

}

第三步 - 添加 JavaScript：

亲自试一试