Paano gumawa: popup window

Matututunan kung paano gumawa ng popup window gamit ang CSS at JavaScript.

Klik ko upang palitan ang pagpapakita ng popup window! Isang simpleng popup window!

亲自試試

Paano gumawa ng popup window

Pang-unang hakbang - Magdagdag ng HTML:

<div class="popup" onclick="myFunction()">Click me!</div>
  <span class="popuptext" id="myPopup">Popup text...</span>
</div>

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

<script>
// 当用户单击 <div> 时，打开弹出窗口
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}
</script>

亲自試試

相关页面

教程：CSS 工具提示

教程：如何创建模态