如何实现在web页面中弹框进行交互操作

最新推荐文章于 2024-03-01 16:32:11 发布

ctryC-V

最新推荐文章于 2024-03-01 16:32:11 发布

阅读量3k

点赞数 4

文章标签： css html5 javascript

本文链接：https://blog.csdn.net/weixin_48244977/article/details/106561525

版权

如何实现在web页面中弹框进行交互操作? 模态对话框

在这里提供几种方法:

一.使用js

直接上码

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BYt2dMR2-1591287387845)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200604211913596.png)]$

效果图

在这里插入图片描述

另外可以在弹出框中输入数据

在这里插入图片描述

第三种可以用模态对话框来实现

模态对话框（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" />记住密码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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”;
}

ctryC-V

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
如何实现在web页面中弹框进行交互操作

如何实现在web页面中弹框进行交互操作? 模态对话框在这里提供几种方法:一.使用js直接上码效果图另外可以在弹出框中输入数据第三种可以用模态对话框来实现模态对话框（Modal Dialogue Box，又叫做模式对话框），是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应。如单击【确定】或【取消】按钮等将该对话框关闭。一般来说，Windows应用程序中，对话框分为模态对话框和非模态对话框两种。二者的区别在于当对话框打开时，是否允许用户进行其他对象的操作。这就
复制链接

扫一扫