bootstrap模态窗口

最新推荐文章于 2024-04-30 17:22:13 发布
最新推荐文章于 2024-04-30 17:22:13 发布
阅读量164 收藏
点赞数
分类专栏： bootstrap 文章标签： 模态窗口 bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43293451/article/details/92760705
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>bootstrap</title>
	<style type="text/css">		

		div.d1{
   			padding-top:70px;
		}
	</style>
</head>
<body>
	<script src="jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap/3.3.6/bootstrap.min.css">
	<script src="bootstrap/js/bootstrap/3.3.6/bootstrap.min.js"></script>

	<div class="d1" style="width:800px;margin:10px">
		<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击弹出模态窗口</button>
		<div class="modal fade" id="myModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">x</span><span class="sr-only">Close</span></button>
					<h4 class="modal-title">提问</h4>
				</div>
				<div class="modal-body">
					<p>问题描述</p>
					<textarea class="form-control"></textarea>
				</div>
				<div class="modal-footer">
					<button data-dismiss="modal" class="btn btn-default">关闭</button>
					<button class="btn btn-primary">提交</button>
				</div>
			</div>
		</div>
		</div>
	</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>bootstrap</title>
	<style type="text/css">		

		div.d1{
   			padding-top:70px;
		}
	</style>
</head>
<body>
	<script src="jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap/3.3.6/bootstrap.min.css">
	<script src="bootstrap/js/bootstrap/3.3.6/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#open").click(function(){
				$("#myModal").modal("show");
			});
			$("#submit").click(function(){
				alert("信息已提交");
				$("#myModal").modal("hide");
			});
			$("#toggle").click(function(){
				$("#myModal").modal("toggle");
			});
		});
	</script>

	<div class="d1" style="width:800px;margin:10px">
		<button class="btn btn-primary" id="open">打开模态窗口</button><!--js模态窗口-->
		<button class="btn btn-primary" id="close">关闭模态窗口</button>
		<button class="btn btn-primary" id="toggle">切换模态窗口</button>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">x</span><span class="sr-only">Close</span></button>
					<h4 class="modal-title">提问</h4>
				</div>
				<div class="modal-body">
					<p>问题描述</p>
					<textarea class="form-control"></textarea>
				</div>
				<div class="modal-footer">
					<button data-dismiss="modal" class="btn btn-default">关闭</button>
					<button class="btn btn-primary" id="submit">提交</button>
				</div>
			</div>
		</div>
		</div>
	</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>bootstrap</title>
	<style type="text/css">		

		div.d1{
   			padding-top:70px;
		}
	</style>
</head>
<body>
	<script src="jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap/3.3.6/bootstrap.min.css">
	<script src="bootstrap/js/bootstrap/3.3.6/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#myModal").on("show.bs.modal",function(){
				alert("开始显示模态窗口");
			});
			$("#myModal").on("shown.bs.modal",function(){
				alert("窗口完毕");
			});
			$("#myModal").on("hide.bs.modal",function(){
				alert("开始隐藏窗口");
			});
			$("#myModal").on("hidden.bs.modal",function(){
				alert("隐藏窗口完毕");
			});
		});
	</script>

	<div class="d1" style="width:800px;margin:10px">
		<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">弹出模态窗口</button>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">x</span><span class="sr-only">Close</span></button>
					<h4 class="modal-title">提问</h4>
				</div>
				<div class="modal-body">
					<p>问题描述</p>
					<textarea class="form-control"></textarea>
				</div>
				<div class="modal-footer">
					<button data-dismiss="modal" class="btn btn-default">关闭</button>
					<button class="btn btn-primary" id="submit">提交</button>
				</div>
			</div>
		</div>
		</div>
	</div>
</body>
</html>

在这里插入图片描述

taojYang
关注
专栏目录
Bootstrap模态窗口
weixin_45846139的博客
05-18 270
在一些网站上，当我们点击登录按钮或者是注册按钮时，会弹出一个小的窗口在页面上显示，二页面上的内容还能隐隐约约看见，就如下面图片一样,这种样式可以使用Bootstrap中模态框来快速又简单的实现。 触发器 在使用模态框之前，得先要有一个触发器来触发模态框，触发器可以是按钮或者链接等，在这里我们使用按钮来当触发器。 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
bootstrap模态框
shijiaolong0的博客
02-18 133
&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="utf-8" /&gt;         &lt;title&gt;&lt;/title&gt;         &lt;link rel="stylesheet" href="css/bootstra
弹窗和模态窗口
Holly_Word的博客
10-23 440
1)方式一：通过标签的属性data-toggle="modal" data-target="模态窗口的id"点击添加了data-dismiss=""属性的标签，自动关闭该标签所在的模态窗口。模态窗口本质上就是原来页面中的一个，只有一个页面;选择器(选中div).modal("show");弹窗 window.open("url","_blank");模态窗口：模拟的窗口,本质上是，通过设置z-index大小来实现的;3)方式三：通过标签的属性data-dismiss=""
bootstrap模态窗
浮生不觉梦的博客
04-10 276
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <script src="../day24/jquery-ui/jquery-3.1.0.js">
bootstrap 模态框 关闭 灰色_基于Boostrap Modal开发的可多层嵌套、定制灵活的模态窗口...
weixin_39613188的博客
11-21 123
插件预览模态窗口模式消息对话框模式遮罩模式边角通知窗口模式主要特性基于jQuery、bootstrap2,3进行开发可多层嵌套，并拥有各自独立的上下文灵活的窗口元素定制模态窗口模式可载入服务端页面、远程页面、页面静态元素等内容消息对话框模式，包含info、warning、error、success、confirm等模式边角通知窗口模式，包含info、warning、error、success等模式...
使用Bootstrap插件：模态窗口
cune1359的博客
07-02 310
使用Bootstrap插件：模态窗口 Bootstrap在Web设计师和开发人员中广受欢迎，在此网站BuiltWithBootstrap中，您可以看到许多网站都采用Bootstrap作为其网站或webapps的基础。 在上一篇文章中，我们介绍了Bootstrap中的一些UI组件 。 这次，在本文中，我们将探讨Bootstrap插件。 如前所述，Bootstrap附带了许多自定...
Bootstrap模态窗口源码解析
08-31
Bootstrap模态窗口是网页设计中常用的交互元素，用于在用户界面上展示临时信息或执行一些操作，而无需离开当前页面。Bootstrap模态窗口基于JavaScript插件实现，它提供了丰富的功能和自定义选项，如背景遮罩层、键盘...
bootstrap模态窗口美化特效
12-10
Bootstrap模态窗口是网页设计中常用的一种交互元素，它允许用户在不离开当前页面的情况下查看或操作额外的信息。在这款“bootstrap模态窗口美化特效”中，开发者通过增强原生Bootstrap模态窗口的视觉效果，提供了...
基于velocity.js过渡动画的Bootstrap模态窗口和Popover特效.zip
11-10
在这个项目中，“基于velocity.js过渡动画的Bootstrap模态窗口和Popover特效”是一个增强Bootstrap功能的例子，它利用velocity.js这个高性能的JavaScript动画库来实现更为流畅和动态的交互效果。 首先，我们来了解...
Bootstrap模态窗口扩展jquery插件
12-10
Bootstrap模态窗口是网页设计中常用的一种交互元素，它允许用户在不离开当前页面的情况下查看或操作额外的信息。而这款“Bootstrap模态窗口扩展jquery插件”则为这个功能提供了更多的可能性，使得开发者能够创建更加...
bootstrap 自定义模态窗口
weixin_30237719的博客
08-20 202
$(".classname").click(function () { $('#mymodel').modal('show'); alert('模态框打开了'); }); $('#mymodel').on('hide.bs.modal', function () { aler...
bootstrap模态窗口模态框
涂涂
07-29 3456
一．基本使用 使用模态框的弹窗组件需要三层 div 容器元素，分别为 modal(模态声明层)、dialog(窗口声明层)、content(内容层)。在内容层里面，还有三层，分别为 header(头部)、body(主体)、footer(注脚)。 //基本实例 class="modal show" tabindex="-1"> class="modal-dialog
Bootstrap模态窗体
weixin_44538423的博客
02-23 397
Bootstrap模态窗体 开发工具与关键技术：DW、HTML、Bootstrap插件 作者：刘东标 撰写时间：2019-01-27 data-backdrop=&quot;static&quot;单击背景不关闭弹出窗，默认值为data-backdrop=“true” Bootstrap模态窗体 &amp;lt;div class=&quot;h4 ...
极速掌握MySQL存储过程，开学秒室友
2401_84046635的博客
04-07 359
上述知识点，囊括了目前互联网企业的主流应用技术以及能让你成为“香饽饽”的高级架构知识，每个笔记里面几乎都带有实战内容。很多人担心学了容易忘，这里教你一个方法，那就是重复学习。打个比方，假如你正在学习 spring 注解，突然发现了一个注解@Aspect，不知道干什么用的，你可能会去查看源码或者通过博客学习，花了半小时终于弄懂了，下次又看到@Aspect 了，你有点郁闷了，上次好像在哪哪哪学习，你快速打开网页花了五分钟又学会了。从半小时和五分钟的对比中可以发现多学一次就离真正掌握知识又近了一步。
Bootstrap 显示模态框
最新发布
2401_84150046的博客
04-30 437
在开头跟大家分享的时候我就说，面试我是没有做好准备的，全靠平时的积累，确实有点临时抱佛脚了，以至于我自己还是挺懊恼的。（准备好了或许可以拿个40k，没做准备只有30k+，你们懂那种感觉吗）如何准备面试？1、前期铺垫（技术沉积）程序员面试其实是对于技术的一次摸底考试，你的技术牛逼，那你就是大爷。大厂对于技术的要求主要体现在：基础，原理，深入研究源码，广度，实战五个方面，也只有将原理理论结合实战才能把技术点吃透。
Bootstrap系列之模态框（Modal）
热门推荐
老__L的博客
06-16 1万+
模态框（Modal）
BootStrap模态框
★匆匆★的专栏
08-07 1048
摘自《极客学院》 1、效果图： 2、html代码： BootStrap模态框 ×
jquery_bootstrap模式窗体加入
guoruijun_2012_4的专栏
07-20 272
1、jquery_bootstrat模式窗体加入。 2、执行查询能检索出数据，datatable能展示数据。 3、mybatis加入。
BootStrap学习笔记JS插件（一）--模态弹出框
男神的专栏
02-05 861
2、data-target可以设置为CSS的选择符，也可以设置为模态弹出窗的ID值，一般情况设置为模态弹出窗的ID值，因为ID值是唯一的值。可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果。，一般使用“modal-header”表示，主要包括标题和关闭按钮。，一般使用“modal-footer”表示，主要放置操作按钮。.modal-lg 为大弹出框；试验在触发按钮或弹出modal上设置，发现都可以使用。，一般使用“modal-body”表示，弹出框的主要内容。
Bootstrap模态窗口源码深度解析
"Bootstrap模态窗口源码解析" Bootstrap模态窗口是前端开发中常用的一个功能，它允许在页面上弹出一个可交互的对话框，而不会离开当前页面。Bootstrap框架提供了优雅的实现方式，其背后的JavaScript源码是值得深入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值