alert上的文字提示更改
时间: 2023-08-28 20:06:47 浏览: 103
你可以通过 JavaScript 来创建一个自定义的 alert 弹窗,从而更改弹窗上的文字提示。具体步骤如下:
1. 隐藏原生的 alert 弹窗
```css
/* 隐藏原生的 alert 弹窗 */
.alert {
display: none;
}
```
2. 创建一个自定义的 alert 弹窗
```html
<!-- 自定义的 alert 弹窗 -->
<div class="custom-alert">
<div class="message"></div>
<button class="ok-btn">OK</button>
</div>
```
3. 编写 JavaScript 代码来替代原生的 alert 函数
```js
// 自定义的 alert 函数
function customAlert(message) {
// 显示自定义的 alert 弹窗
var customAlert = document.querySelector(".custom-alert");
customAlert.style.display = "block";
// 设置弹窗上的提示文字
var messageElem = customAlert.querySelector(".message");
messageElem.innerText = message;
// 绑定 OK 按钮的点击事件
var okBtn = customAlert.querySelector(".ok-btn");
okBtn.onclick = function() {
// 隐藏自定义的 alert 弹窗
customAlert.style.display = "none";
};
}
// 使用自定义的 alert 函数
customAlert("Hello World!");
```
通过以上步骤,你就可以创建一个自定义的 alert 弹窗,并更改弹窗上的文字提示了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)