帮我写个对话框html页面
时间: 2023-07-01 13:05:29 浏览: 52
当然可以,以下是一个简单的对话框HTML页面的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>对话框</title>
<style>
.container {
width: 500px;
margin: 50px auto;
padding: 20px;
background-color: #f5f5f5;
border-radius: 10px;
box-shadow: 0px 0px 10px #ccc;
}
.chatbox {
height: 300px;
overflow-y: scroll;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
.inputbox {
display: flex;
}
.msginput {
flex: 1;
padding: 10px;
border: none;
border-radius: 5px;
margin-right: 10px;
}
.btnsend {
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="chatbox" id="chatbox">
<!-- 消息内容将在这里显示 -->
</div>
<div class="inputbox">
<input type="text" name="msginput" id="msginput" class="msginput" placeholder="请输入消息...">
<button class="btnsend" onclick="sendMsg()">发送</button>
</div>
</div>
<script>
function sendMsg() {
var input = document.getElementById("msginput");
var chatbox = document.getElementById("chatbox");
if (input.value != '') {
var msg = '<p><strong>我:</strong>' + input.value + '</p>';
chatbox.innerHTML += msg;
input.value = '';
}
}
</script>
</body>
</html>
```
这是一个基础的HTML页面,包含一个对话框和一个文本输入框,用户可以在输入框中输入消息,并点击“发送”按钮将消息发送到对话框中。你可以根据自己的需求进行修改和扩展。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)