写一个登录对话框,用js并附加图片示例
时间: 2024-03-28 11:40:09 浏览: 19
你好,下面是一个简单的登录对话框 JavaScript 代码,同时附带示例图片:
HTML 代码:
```
<div id="login-modal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<form>
<label>用户名:</label>
<input type="text" id="username" />
<br />
<label>密码:</label>
<input type="password" id="password" />
<br />
<input type="button" value="提交" onclick="login()" />
</form>
</div>
</div>
<button onclick="openModal()">打开登录框</button>
```
JavaScript 代码:
```
// 打开登录框
function openModal() {
document.getElementById("login-modal").style.display = "block";
}
// 关闭登录框
function closeModal() {
document.getElementById("login-modal").style.display = "none";
}
// 登录
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username && password) {
// 登录成功
alert("登录成功!");
closeModal(); // 登录成功后关闭登录框
} else {
alert("请输入用户名和密码!");
}
}
```
示例图片:
![login-modal](https://img-blog.csdnimg.cn/20210911142500660.png)