Bootstrap弹出窗示例

最新推荐文章于 2024-02-05 02:23:43 发布
最新推荐文章于 2024-02-05 02:23:43 发布
阅读量3.5k 收藏 2
点赞数
分类专栏： Bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunnylinner/article/details/51209630
版权 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>模态弹出框--实现原理解析（二）</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<h3>Bootstrap弹出窗示例</h3>

<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
大的模态弹出窗
</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">模态弹出窗标题</h4>
			</div>
			<div class="modal-body">
				<p>模态弹出窗主体内容</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary">保存</button>
			</div>
		</div>
	</div>
</div>

<!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">
小的模态弹出窗
</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">模态弹出窗标题</h4>
			</div>
			<div class="modal-body">
				<p>模态弹出窗主体内容</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary">保存</button>
			</div>
		</div>
	</div>
</div>

<!-- href触发模态弹出窗元素 -->
<a data-toggle="modal" data-target="#mymodal-link" class="btn btn-primary">通过链接href属性触发</a>
<!-- 模态弹出窗内容 -->
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="mymodal-link">
    <div class="modal-dialog">
    	<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">模态弹出窗标题</h4>
			</div>
			<div class="modal-body">
				<p>模态弹出窗主体内容</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary">保存</button>
			</div>
		</div>
	</div>
</div>

<button class="btn btn-primary" type="button">JavaScript触发</button>
<div class="modal fade" id="themodal" tabindex="-1">
    <div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">模态弹出窗标题</h4>
			</div>
			<div class="modal-body">
				<p>模态弹出窗主体内容</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary">保存</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
  $(function(){
    $(".btn").click(function(){
      $("#themodal").modal("toggle");
    });
  });
</script>
</body>
</html>
<!--fade 过渡动画效果-->
<!--data-toggle 用来控制模态弹出窗口的显示-->
<!--data-target 用来定义要触发的模态弹出窗是哪一个-->
<!--data-backdrop 是否包含一个背景div元素，如果为真，则单击该背景时关闭弹出窗-->
<!--data-keyboard 如果为真，按ESC关闭弹出窗-->
<!--data-show 如果为真，初始化时显示弹出窗-->

几个简单的示例~





sunnylinner
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Blazor的简单Bootstrap模式对话框
04-04
如何为Blazor构建“相对”简单的模态对话框
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
12-10
1.Bootstrap弹出框示例 <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">点我弹出/隐藏弹出框</button> 2.改进 有时提示框内容较多，仅仅使用data-content,title,在html文档里写出来比较乱，我们可以借助提供的popover（）方法，实现对弹出框内容、样式的修改。
全面解析Bootstrap弹窗的实现方法
最新发布
男神的专栏
02-05 1231
1 . 除了使用自定义属性触发模态弹出框之外，还可以通过JavaScript方法来触发模态弹出窗。比如说给一个按钮一个单击事件，然后触发模态弹出窗。除了通过data-toggle和data-target来控制模态弹出窗之外，Bootstrap框架针对模态弹出框还提供了其他自定义data-属性，来控制模态弹出窗。2 . 使用JavaScript触发模态弹出窗时，Bootstrap框架提供了一些设置，主要包括。☑ 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮。
BootstrapBlazor实战 Menu 导航菜单使用(1)
alex_zoucn的博客
04-25 1322
实战BootstrapBlazorMenu 导航菜单的使用, 以及整合Freesql orm快速制作菜单项数据库后台维护页面
bootstrap实现弹窗输入简单实例
1002710030
11-14 286
【代码】bootstrap实现弹窗输入简单实例。
10分钟做好 Bootstrap Blazor 的表格组件导出 Excel/Word/Html/Pdf
alex_zoucn的博客
01-11 1185
上篇: Bootstrap Blazor 实战 通用导入导出服务(Table组件)新建工程b14table 将项目添加到解决方案中： 使用 nuget.org 进行 BootstrapBlazor 组件安装, FreeSql sqlite库,字体 … 2.样式表和Javascript 引用 增加主题样式表到 文件中删除 并在下面添加两行 添加 Javascript 引用到 文件中在 之前添加 完整文件 3.添加增加命名空间引用到 文件中 其中 AME.Services 和 Blazor100.Se
Blazor Bootstrap 组件库 Toast 轻量弹窗组件介绍
alex_zoucn的博客
04-17 1153
轻量级 Toast 弹窗 DEMO https://www.blazor.zone/toasts 基础用法: 用户操作时，右下角给予适当的提示信息 <ToastBox class="d-block" Options="@Options1" /> @code{ Options1 = new ToastOption { Title = "保存数据", IsAutoHide = false, Content = "保存数据成功，4 秒后自动关闭" }; } Toast 手动关闭: 不会自
Bootstrap Blazor 实战 Dialog 对话框组件快速入门
alex_zoucn的博客
12-21 1608
Dialog 对话框组件快速入门
利用bootstrap实现简单的弹窗
热门推荐
qq_41340666的博客
07-10 1万+
首先引入bootstrap的js库和jquery库 例如： <script src="/js/jquery.min.js"></script> <script src="/js/bootstrap.min.js"></script> 写js方法： 例如： function chstatConfirm(flag, params) {...
bootstrap弹出框
weixin_30832143的博客
05-13 54
要想使用Bootstrap Popover（弹出框）则必须引入其依赖的文件: jquery.js这个必须的(还是要写在其他js前面,bootstrap是依赖jquery的哦) bootstrap-tooltip.js bootstrap-popover.js bootstrap.css 我试过不引入bootstrap-tooltip.js和bootstrap-popover.j...
bootstrap弹窗示例
01-10
bootstrap弹窗示例 modal
BootStrap中的模态框（modal，弹出层）功能示例代码
10-17
bootstrap中的模态框（modal），不同于Tooltips，模态框以弹出对话框的形式出现，具有最小和最实用的功能集。这篇文章主要介绍了BootStrap中的模态框（modal，弹出层）,需要的朋友可以参考下
Bootstrap告警框（alert）实现弹出效果和短暂显示后上浮消失的示例代码
10-14
主要介绍了Bootstrap告警框（alert）实现弹出效果和短暂显示后上浮消失，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
用.NET进行客户端Web开发？看这个Bootstrap风格的BlazorUI组件库
dotNET跨平台
06-12 891
点击上方“Dotnet9”添加关注哦Blazor一、前言今天在下班的路上（地铁上），站长习惯性的掏出手机，就收到知乎向站长推送的一篇BlazorUI组件库推荐文章，是码云官方的：原文链接...
BootstrapDialog.dialogs关闭指定层的弹出框
Todd的专栏
09-26 8192
页面一： 点击新增黑名单，调用方法弹出窗口：  新增黑名单 function addDetailInfo(url,title,formId,cssClasses){ var $that = $(this); var formUrl = url; if(url.indexOf("?")!=-1){ formUrl = url.substring(0,url.indexOf("?
Blazor 二级弹窗实现
℡メ㏑╭ァ小凯
11-23 192
5、如果C要把返回值传给B，则可以继续在下面的A页面，通过C的操作事件去调用B页面的方法或属性，因为BC都在A页面，所以C可以直接操作B的内容。3、所以把C的整个弹窗对象（即REF标记的对象）当做一个参数传入到B里面，如下面代码的Model2。最后改成这样实现了二级弹窗，这种思路如果出现三级弹窗就麻烦了，官方也没找到好的例子。4、这样就可以在B页面调用C页面的对象了，实现B页面打开C的弹窗。2、因为要实现A弹出B后，B里面再弹出C。1、把B、C弹窗内容都放入到A页面。
BootstrapBlazor组件使用：数据注解
qq_44695769的博客
08-22 1169
BootstrapBlazor(一下简称BB)是个特别好用的组件，基本上满足了大部分功能。业务逻辑上面没任何问题，官方的文档也特别详细。（你看过那种只给案例的文档你就明白什么是好文档了）BB 官方文档DisplayName：名称Ignore 是否忽略order 排序FormatString：格式化RequiredErrorMessage：检验错误报错提示对sqlsugar生成对象添加BB注解/// Desc:get;set;
Bootstrap组件——模态弹窗
xun__xing的博客
07-31 1445
模态弹窗一、模态弹窗1.基本2.垂直居中3.包含栅格系统4.模态框相同内容不同5.尺寸大小6.data属性7.Tooltips工具提示和弹出提示框8.方法与事件 一、模态弹窗 弹出模态框是用HTML、CSS和Javascript构建的，它们位于文档中其它表现元素之上，并从<body>中删除滚动事件，以便模态框自身的内容能得到滚动。 点击模态框的“backdrop”（灰背景区域），将自动关闭动态模块框。 Bootstrap一次只支持一个模态窗口，不支持嵌套模式，因为我们相信那样叠加会造成用户体

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值