页面弹出对话框,输入名字和年龄,页面显示大家好
时间: 2024-10-25 09:13:41 浏览: 16
页面弹出对话框通常是在网页开发中通过JavaScript或者其他前端技术实现的用户交互功能。当用户点击特定按钮或者触发某个事件时,会弹出一个包含输入字段的窗口,允许他们输入姓名和年龄。这种常见于表单提交前的验证环节,或者简单的数据收集场景。
例如,在HTML和JavaScript中,你可以这样做:
```html
<button onclick="showInputDialog()">请输入姓名和年龄</button>
<!-- 弹出的模态对话框 -->
<div id="dialog" style="display:none">
<input type="text" id="nameInput" placeholder="姓名">
<input type="number" id="ageInput" placeholder="年龄">
<button onclick="submitData()">确定</button>
</div>
<script>
function showInputDialog() {
document.getElementById('dialog').style.display = 'block';
}
function submitData() {
var name = document.getElementById('nameInput').value;
var age = document.getElementById('ageInput').value;
if (name && age) { // 验证输入是否为空
alert("大家好," + name + ",您的年龄是:" + age);
hideDialog();
}
}
// 隐藏对话框
function hideDialog() {
document.getElementById('dialog').style.display = 'none';
}
</script>
```
在这个例子中,当用户填写并点击“确定”时,会弹出一个对话框,提示输入的名字和年龄,并显示一条问候信息。
阅读全文