用CSS和JavaScript在页面最下端增加一个提交建议输入框并在提交后出现一个弹窗显示“感谢您的建议”
时间: 2024-03-16 19:43:24 浏览: 21
好的,下面是一个简单的示例,演示如何使用CSS和JavaScript在页面最下方添加提交建议输入框,并在提交后出现一个弹窗显示“感谢您的建议”:
HTML代码:
```
<div class="feedback-form">
<h3>提交建议</h3>
<form>
<label for="feedback">请告诉我们您的建议:</label>
<textarea id="feedback" name="feedback"></textarea>
<button type="submit">提交</button>
</form>
</div>
```
CSS代码(用于定位和样式化表单):
```
.feedback-form {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #f1f1f1;
padding: 20px;
}
.feedback-form h3 {
margin-top: 0;
}
.feedback-form form {
display: flex;
flex-direction: column;
}
.feedback-form label {
margin-bottom: 10px;
}
.feedback-form textarea {
height: 100px;
margin-bottom: 10px;
}
.feedback-form button {
align-self: flex-end;
}
```
JavaScript代码(用于显示感谢您的建议弹窗):
```
// 获取表单元素
const form = document.querySelector('.feedback-form form');
// 添加提交事件监听器
form.addEventListener('submit', (e) => {
e.preventDefault(); // 阻止表单默认提交行为
// 获取反馈文本框元素
const feedbackInput = document.querySelector('#feedback');
// 获取反馈内容
const feedbackText = feedbackInput.value;
// 将反馈内容提交到后端(这里用console.log()代替)
console.log(`提交的反馈内容为:${feedbackText}`);
// 显示感谢您的建议弹窗
alert('感谢您的建议!');
});
```
这是一个基本的示例,您可以根据自己的需要进行修改和扩展。
相关推荐
![](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)
![](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)