写一段html代码要求点击按钮弹出框弹框内容是一个表单提交里面包含input输入框地址选择器文件上传和单选以及多选按钮
<!DOCTYPE html>
<html>
<head>
<title>弹出框示例</title>
<style>
#myModal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
<pre><code> .modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
</code></pre>
</head>
<body>
<h2>点击按钮弹出框</h2>
<button onclick="openModal()">打开弹出框</button>
<pre><code><!-- 弹出框 -->
<div id="myModal">
<div class="modal-content">
<span class="close" onclick="closeModal()">&times;</span>
<h3>表单提交</h3>
<form action="submit.php" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="address">地址:</label>
<select id="address" name="address">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select><br><br>
<label for="file">文件上传:</label>
<input type="file" id="file" name="file"><br><br>
<label for="gender">性别:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label><br><br>
<label for="hobby">爱好:</label>
<input type="checkbox" id="hobby1" name="hobby[]" value="reading">
<label for="hobby1">阅读</label>
<input type="checkbox" id="hobby2" name="hobby[]" value="music">
<label for="hobby2">音乐</label>
<input type="checkbox" id="hobby3" name="hobby[]" value="sports">
<label for="hobby3">运动</label><br><br>
<input type="submit" value="提交">
</form>
</div>
</div>
<script>
// 打开弹出框
function openModal() {
document.getElementById("myModal").style.display = "block";
}
// 关闭弹出框
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
</script>
</code></pre>
</body>
</html
原文地址: http://www.cveoy.top/t/topic/iVPI 著作权归作者所有。请勿转载和采集!