如何制作一个弹窗,页面自动显示指定txt文档中内容
时间: 2024-03-24 10:39:02 浏览: 166
自动获取指定的txt文件信息
5星 · 资源好评率100%
制作弹窗可以使用HTML、CSS和JavaScript来实现,具体步骤如下:
1. 创建一个HTML文件,包含一个按钮和一个隐藏的弹窗框。
```html
<button onclick="showPopup()">显示弹窗</button>
<div id="popup" style="display:none">
<h2>弹窗标题</h2>
<p id="popup-content"></p>
</div>
```
2. 创建一个JavaScript函数,用来显示弹窗。
```javascript
function showPopup() {
// 获取弹窗框和内容元素
var popup = document.getElementById("popup");
var content = document.getElementById("popup-content");
// 发送Ajax请求获取txt文档内容
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 将txt文档内容显示在弹窗框中
content.innerHTML = xhr.responseText;
// 显示弹窗框
popup.style.display = "block";
}
};
xhr.open("GET", "content.txt", true);
xhr.send();
}
```
3. 在txt文档中写入要显示的内容。
```txt
这是要显示的内容。
```
4. 将HTML、JavaScript和txt文档放在同一个目录下,用浏览器打开HTML文件,点击按钮即可显示弹窗并自动显示txt文档中的内容。
阅读全文