如何实现在web页面中弹框进行交互操作? 模态对话框
在这里提供几种方法:
一.使用js
直接上码
效果图
另外可以在弹出框中输入数据
第三种可以用模态对话框来实现
模态对话框(Modal Dialogue Box,又叫做模式对话框),是指在用户想要对对话框以外的应用程序进行操作时,必须首先对该对话框进行响应。如单击【确定】或【取消】按钮等将该对话框关闭。一般来说,Windows应用程序中,对话框分为模态对话框和非模态对话框两种。二者的区别在于当对话框打开时,是否允许用户进行其他对象的操作。
这就完成了一个模态框了!!!
下面是我添加了的效果
上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="id1"style=" display: none;background-color: rgba(0,0,0,0.5); width: 100%;height: 100%; position: absolute;z-index: 9999999;">
<div style="display: inline-block;width: 630px;height: 350px;background-color: antiquewhite; position: relative;left: 30%;top: 30%; border:2px solid darkgoldenrod;text-align: center;" >
<h1>欢迎注册</h1>
<input type="text" name="username" placeholder="手机号/邮箱" style="width: 250px; height: 30px; text-indent: 30px;margin: 10px;"/>
<br/>
<input type="password" name="pwd"placeholder="输入密码"style="width: 250px; height: 30px; text-indent: 30px;margin: 10px; "/>
<br/>
<input type="password" name="qpwd"placeholder="确认密码" style="width: 250px; height: 30px; text-indent: 30px;margin: 10px;"/>
<br/>
<input type="radio" />记住密码 <a href="#">直接登录</a>
<br/>
<input type="button" value="注册" style="width: 250px; height: 30px; margin: 10px;background-color: firebrick;font-size: 1.25rem;text-align: -25px; "/>
</div>
</div>
<div style="float: left;">
<h1>学习使用模态窗口</h1>
网页内容
<button style=" width: 50px; height: 30px;" type="button" value="注册" onclick="show()" ></button>
</div>
<script>
function show(){
document.getElementById("id1").style.display="block";
}
</script>
</body>
</html>
ById(“id1”).style.display=“block”;
}