46 lines
1.9 KiB
Markdown
46 lines
1.9 KiB
Markdown
---
|
||
title: How to Create Popups
|
||
localeTitle: 如何创建弹出窗口
|
||
---
|
||
## 如何创建弹出窗口
|
||
|
||
当您使用鼠标选择选项或按特殊功能键时,弹出窗口会弹出(显示)。
|
||
|
||
在此示例中,当您单击按钮时将显示弹出窗口,并且在您按下X选项之前将保持在屏幕上。
|
||
|
||
我们将使用`HTML` , `CSS`和`JavaScript`构建弹出窗口
|
||
|
||
### 第1步HTML
|
||
|
||
HTML提供弹出窗口的结构
|
||
|
||
\`\`\`HTML
|
||
|
||
打开PopUp
|
||
|
||
弹出JavaScript
|
||
|
||
X
|
||
```
|
||
### Step 2 CSS
|
||
We will choose our own style for the popup window. Notice: the popup div should be hidden at first, so in the style I will select display: none;
|
||
```
|
||
|
||
CSS .popup _main_ div { 位置:固定; 宽度:800px; 身高:400px; 边框:2px纯黑色; border-radius:5px; background-color:#fff; 左:50%; margin-left:-400px; 最高:50%; margin-top:-250px; display:none;
|
||
|
||
} .close _popup { 位置:绝对; 宽度:25px; 身高:25px; border-radius:25px; 边框:2px纯黑色; text-align:center; 右:5px; 上:5px; 游标:指针; } .close_ popup p { margin-top:5px; font-weight:400;
|
||
|
||
} 。文本{ text-align:center; font-size:30px; font-weight:400; 保证金最高:22%; } #Btn { 位置:绝对; 左:50%; 顶部:20%;
|
||
|
||
}
|
||
```
|
||
### Step 3 JavaScript
|
||
```
|
||
|
||
JS //首先,我将初始化我的变量 //选择我们将从DOM中使用的元素 //我将在按钮中添加en事件,该事件将触发一个函数,将弹出窗口的显示样式从none更改为block
|
||
|
||
const Btn = document.getElementById(“Btn”) const PopupDiv = document.querySelector(“。popup _main_ div”) const ClosePopup = document.querySelector(“。close\_popup”) Btn.addEventListener( '点击',函数(){ PopupDiv.style.display = “块” }) ClosePopup.addEventListener( '点击',函数(){ PopupDiv.style.display = “无” })
|
||
|
||
\`\`\`
|
||
|
||
实时代码: [Codepen.io](https://codepen.io/voula12/pen/qyyNeK) |