JS实现模态框

最新推荐文章于 2024-05-23 21:59:51 发布
最新推荐文章于 2024-05-23 21:59:51 发布
阅读量1.8w 收藏 68
点赞数 16
分类专栏： HTML/CSS/JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_36014216/article/details/101512495
版权

实现简单弹出框/遮罩层的效果。 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹出框</title>
	<style>
		*{
			padding: 0;
			margin:0;
		}
		body{
			width: 100%;
			height:100%;
			background: #fff;
		}
		.toggleModal{
			padding: 10px 20px;
			color: white;
			background: #409EFF;
			border:none;
			box-shadow: 2px 3px 20px rgba(0,0,0,0.2);
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
		}
		.mask{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.4);
			z-index: 100;
			display: none;
		}
		.modal{
			position: absolute;
			top: 50%;
			left: 50%;
			width: 400px;
			transform: translate(-50%,-50%);
			border-radius: 5px;
			background: #fff;
			box-shadow: 2px 3px 20px rgba(0,0,0,0.2);
			z-index: 120;
			display: none;
		}
		.modal .modal-header{
			height: 50px;
			border-bottom: 1px solid #f5f5f5;
			padding: 0 15px;
		}
		.modal .modal-header p {
			line-height: 50px;
			display: inline-block;
		}
		.modal .modal-header .title{	
			font-size: 18px;
			color: #333;
		}
		.modal .modal-header .close{
			float: right;
			font-size: 26px;
			margin-top: -2px;
			color: #9C9FA4;
			cursor: default;
		}
		.modal .modal-content{
			min-height: 100px;
		}
		.modal .modal-footer .btn{
			padding: 0 20px;
			height: 36px;
			line-height: 36px;
			color: white;
			background: #409EFF;
			border: none;
		}
		.modal .modal-footer{
			border-top: 1px solid #f5f5f5;
			padding: 15px;
			text-align: right;

		}
		.container::after{
			content:"";
			display: block;
			clear: both;
		}
	</style>
</head>
<body>
	<div class="container">
		<div>
			<button class="toggleModal" id="toggleModal">触发遮罩层</button>
		</div>
		<div class="modal">
			<div class="modal-header">
				<p class="title">这是弹出层的标题</p>
				<p class="close">×</p>
			</div>
			<div class="modal-content">
				
			</div>
			<div class="modal-footer">
				<button class="close btn">关闭</button>
			</div>
		</div>
		<div class="mask"></div>
	</div>
	<script>
		window.onload = function(){
			// 获取需要使用到的元素
			var toggleModal = document.getElementById("toggleModal");
			var container = document.getElementsByClassName("container")[0];
			var mask = document.getElementsByClassName("mask")[0];
			var modal = document.getElementsByClassName("modal")[0];
			var closes = document.getElementsByClassName("close");
			toggleModal.onclick = show;
			closes[0].onclick = close;
			closes[1].onclick = close;
			function show(){
				mask.style.display = "block";
				modal.style.display = "block";
			}
			function close(){
				mask.style.display = "none";
				modal.style.display = "none";
			}
		}
	</script>
</body>
</html>

TanJ2014
关注
  • 16
    点赞
  • 踩
  • 68
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
js简单模态框
m0_57661429的博客
10-10 777
如图先完成一个按钮，在点击按钮时出现模态框 <!-- 模态框触发按钮 --> <div class="btn"> <button id="open">click me</button> </div> .btn button { background-color: dodgerblue; border: 0 solid dodgerblue; border-radius: 10%; margi
JS模态框
tonysxiaobao的博客
09-04 1002
JS模态框
js 实现模态框 model.js
09-28
js 实现模态框
js代码控制bootstrap的模态框(modal)
最新发布
autumngold的专栏
05-23 601
在Bootstrap 5中，模态框（Modal）是一个自定义的HTML元素，可以用于创建对话框。通过导入Bootstrap的JavaScript模块，可以使用其API来控制模态框的显示和隐藏。以下是一个简单的示例说明如何使用Bootstrap 5中的模态框。如果你的模态框需要在某个特定的动作或事件之后显示，可以将 myModal.show() 放入该事件的处理函数中。同样的，当你需要隐藏模态框时，可以调用 myModal.hide()。以上是Bootstrap 5模态框显示和隐藏的基本实现方式。
模态框
angry_rooster的博客
06-30 8373
模态框 模态对话框（Modal Dialogue Box，又叫做模式对话框），是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应 摘自百度百科 先放上效果图： 基本功能为点击窗口中间的发光按钮，使模态框出现，此时除了模态框部分，页面其他部分无法再点击，必须先点击确定对该模态框进行响应后才能进行其他操作。鼠标按住并拖动模态框标题处，可以实现模态框的拖拽跟随效果 实现 模态框效果的实现分为屏幕中间按钮和模态框确定按钮的点击事件的实现，以及模态框拖拽效果的实现。 由于两个按钮的点击事
几种常见的模态框
weixin_54721820的博客
12-20 382
title: '提示',// 提示文字content: '确认删除该条信息吗？',// 取消按钮的文字自定义cancelText: "取消",// 确认按钮的文字自定义confirmText: "删除",//删除字体的颜色//取消字体的颜色// 执行确认后的操作else {// 执行取消后的操作})
Bootstrap系列之模态框（Modal）
老__L的博客
06-16 1万+
模态框（Modal）
零基础Bootstrap入门教程(16)--模态框
程序员大阳
02-24 2884
本文目录1. 概述2. 模态框样式3. 按钮直接关联模态框4. 通过JS方法打开/关闭模态框5. 调整大小6. 动画效果7. 小结 1. 概述 模态框这个名字有点高雅了，其实就是对话框，用来弹出一个新的界面。 模态框的使用非常的场景，例如在用户管理页面，当进行用户新增时，可以点击新增按钮，弹出一个窗体供填入用户信息然后保存。 注意Bootstrap的模态框一次只能显示一个，不能在打开一个模态框后尝试继续打开第二个。 2. 模态框样式 模态框相关的样式类比较多，我个人是感觉有些过于复杂了，当然这里也不排除Bo
js实现简单模态框实例
10-17
JavaScript 实现简单模态框是一种常见的前端交互设计，它允许用户在不离开当前页面的情况下进行交互，例如输入信息、确认操作或查看详细内容。在网页设计中，模态框经常用于登录、注册、提示信息等场景。下面我们将...
原生js实现简单的模态框示例
10-19
实现模态框的方式有很多种，但作者选择了一种基础而直接的方法，即完全使用原生JavaScript进行实现，不依赖任何框架或库。 首先，作者在HTML部分定义了模态框的基本结构。这里包含了一个按钮和一个模态框本身。按钮...
利用vue实现模态框组件
08-31
综上所述，利用Vue实现模态框组件主要是通过模板定义组件结构，结合CSS样式实现视觉效果，同时定义接口接收外部配置，并通过事件处理用户交互。这样的组件不仅提高了代码的复用性，还能方便地融入各种项目中，满足...
js实现类bootstrap模态框动画
10-20
`opacity`属性用于实现模态框的淡入淡出效果，而`transform`属性则通过`translate`值来实现模态框的滑动效果。 具体来说，我们首先定义了遮罩层的样式，使用`position:fixed;`将遮罩层固定在屏幕的四个方向，设置...
Bootstrap之JavaScript的模态框(modal)使用-不离开父窗体的情况下的互动-点击按钮弹出对话框
昊虹AI笔记
10-25 3070
Bootstrap之JavaScript的模态框(modal)使用-不离开父窗体的情况下的互动-点击按钮弹出对话框
捷码低代码｜Modal模态框组件详解
Gemcoder的博客
08-02 1064
模态框：在当前页面打开一个弹窗，支持自定义弹窗中的内容，例如简单确认框、复杂表单、Iframe等。
bootstrap模态框的详细用法
热门推荐
neos的博客
10-10 1万+
本文介绍了bootstrap中模态框的用法，在文章中我尽量将这一功能说明详细，同时我忽略了部分大部分情况不会使用的属性，也插入一些个人在实际工作中的观点，本文的目标是在你看完本文以后能够较为熟练的使用模态框这一功能，并且不会碰到太多坑。首次写微博，不足之处希望各位看官见谅，如果有大佬看的不爽的也请多多指正，在这里先谢过了。最后如果您喜欢我的文章麻烦点个赞哦。
Bootstrap 5 保姆级教程（十一）：模态框 & 提示框
Flag少侠的博客
04-20 1754
提示框要写在 JavaScript 的初始化代码里: 然后在指定的元素上调用 tooltip() 方法。我们可以通过添加 .modal-sm 类来创建一个小模态框，.modal-lg 类可以创建一个大模态框。通过向元素添加 data-bs-toggle="tooltip" 来来创建提示框。类名：modal-fullscreen。默认情况下提示框显示在元素上方。类名：modal-xl。类名：modal-lg。
模态框案例
07-30 988
模态框 模态框在很多网站是很常见的，比如网易云音乐登录，百度登录等网站。 网易云音乐如图： 让我们来看看代码吧！！注意：这里为了更好的演示效果，增加了遮挡层。 HTML部分： <!-- 外盒子 --> <div class="box"> <!-- 视频 --> <video src="index-video.mp4" loop autoplay preload muted></video> <!-- 倒计时 -->
仅用js代码实现模态框
qq_50951790的博客
07-11 630
很多时候我们经常会用ui框架实现模态框的使用，但是，如果哪一天告诉我们，如何仅用js代码实现一个模态框该怎么办呢？其实就是主要在js中创建html的结构即可，然后通过setAttribute写入样式，我们就会得到下图的结果。这里就要用到很多js中的基础方法运用了，我们先看如下代码。
JavaScript实现模态框的显示和隐藏
04-25
可以通过以下步骤实现JavaScript实现模态框的显示和隐藏： 1. 首先，在HTML中创建一个模态框的div元素和一个按钮元素，用于控制模态框的显示和隐藏。 2. 接着，在JavaScript中获取模态框和按钮元素的引用，并为按钮元素添加点击事件监听器。 3. 在事件监听器中，通过模态框元素的style属性设置display样式属性的值，将模态框显示或隐藏。 以下是示例代码： HTML代码： ``` <button id="btnModal">显示模态框</button> <div id="modal" style="display:none;">模态框内容</div> ``` JavaScript代码： ``` var btnModal = document.getElementById('btnModal'); var modal = document.getElementById('modal'); btnModal.addEventListener('click', function() { modal.style.display = 'block'; // 显示模态框 }); modal.addEventListener('click', function(event) { if (event.target === modal) { modal.style.display = 'none'; // 隐藏模态框 } }); ```
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值