bootstrap创建动态模态框，点击链接时也可以触发动态模态框。

最新推荐文章于 2020-11-22 18:53:03 发布
最新推荐文章于 2020-11-22 18:53:03 发布
阅读量3.1k 收藏
点赞数
分类专栏： bootstrap

转载:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html


<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8"> 
<title>Bootstrap 实例 - 模态框（Modal）插件</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>


<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
开始演示模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
&times;
</button>
<h4 class="modal-title" id="myModalLabel">
模态框（Modal）标题
</h4>
</div>
<div class="modal-body">
在这里添加一些文本
</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 -->
</div>
</body>

</html>



上面是代码，主要说的是下面的两个属性

data-toggle="modal" data-target="#myModal"


这个是bootstrap.js里面调用的，这个是自定义标签，是bootstrap里面的。外面没有。

当你点击这个的时候就会调用。

如果想链接上面实现看下面代码：

<a href="javascript:void(0);" class="small-box-footer" data-toggle="modal" data-target="#myModal">

那么当你点击这link 的时候就会触发这个模态框。

原因就是data-toggle="modal" data-target="#myModal"这两个标签起的作用。


一勺盐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap 模态弹出框--触发模态弹出窗2种方法
chuncui2576的博客
02-24 483
方法一：模态弹出窗声明，只需要自定义两个必要的属性：data-toggle和data-target（bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle="" 或者 data-dismiss=""）。例如： <!-- 触发模态弹出窗的...
bootstrap之模态框
catherine_sfy的博客
03-01 398
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 ...
BootStrap的两种模态框方式
08-30
bootstrap弹出层有多种触发方式，以下是我用到的bootstrap的两种模态框方式，需要的的朋友参考下吧
iPhone6用超链接打开Bootstrap模态框无效
alanzyy的技术路程
05-27 4457
背景描述 这几天在使用Bootstrap的模态框时遇到一个问题，我使用超链接来响应模态框，代码如下： 你确定要取消与用户${userName}的关联关系吗?
bootstrap点击弹出模态框提交表单
weixin_44627672的博客
08-18 5916
bootstrap点击弹出模态框提交表单 代码： <body> <!--bootstrap实现弹出模态框--> <button class="btn btn-default" data-target="#myModal" data-toggle="modal"> 点击弹出模态框 </button> <!--fade 淡入淡出--> <div class="modal fade" id="myModal" aria-l
Bootstrap的模态框modal插件实现点击协议链接弹出协议详情功能
我是传奇
01-29 2832
一、需求  做金融产品的时候，经常要根据协议链接查看弹出的协议详情的需要。主要想通过点击决定弹出详情图层，通过插件简化图层复合。 二、工具  bootstrap modal 如果您想要单独引用该插件的功能，那么您需要引用 modal.js。或者，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。   三、功能  模态框（Modal）是覆盖在父窗体
动态创建模态框（弹窗）
Neo_L的博客
07-17 4528
代码里提供了详细的注解，请仔细阅读 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&g
js页面点击链接打开另一个模态框_模态是一个大多数设计师不能完全理解的UX概念...
weixin_39618176的博客
11-22 186
Dec 11, 2018 阅读时长10分钟 作者：Fabian Sebastian翻译：田晓青、fiona、高蓝光、cyruan、罗几审校：joyking、Dong Cong大多数年轻设计师靠直觉设计数字产品。虽然在许多项目里靠直觉设计是可行的，但是这里也有很多公认的设计准则可以帮助你有逻辑的设计UI界面而不是靠直觉进行设计。本文中，我们将要探索其中一个设计准则——用户界面的模态，我们会讨论为什么...
Bootstrap 模态框（Modal）带参数传值实例
01-19
模态框（Modal）是覆盖在父窗体上的子窗体。...以上所述是小编给大家介绍的Bootstrap 模态框（Modal）带参数传值实例，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
11-28
触发展现模态框，填写对应的信息，然后 ajax 提交表单信息到后台。 简化 点击下面的按钮一次，弹出模态框。点击提交，会直接 alert(“提交”) 。点击一次会觉得很正常，但是如果你重复点几次模态框，会发现...
bootstrap模态框弹出效果
06-24
bootstrap模态框弹出效果是一款15种模态框弹出效果代码。
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
12-09
js代码 function initView(_box){ var $p = $(_box || document); $('a[target="dialog"]', $p).each(function(event){ $(this, $p).unbind('click').click(function(event){ openModal(event); }); }); } $(function(){ initView(); }); /**关闭modal*/ function hideModal(obj){ var modal = $(obj)
实例详解BootStrap的动态模态框及静态模态框
10-18
要用bootStrap这个框架就必须要重载它的class类,也就是说class要一样。接下来通过实例代码给大家介绍BootStrap的动态模态框及静态模态框,需要的朋友可以参考下
BootStrap 模态框实现刷新网页并关闭功能
11-27
hidden.bs.modal，当模态框完全对用户隐藏时触发。 $('#identifier').on('hidden.bs.modal', function () { // 执行一些动作... }) 源码示例 $('#confirmRevokeOrder').on('hidden.bs.modal',function(){ var ...
bootstrap-href触发模态弹出窗元素
weixin_34138056的博客
11-12 1504
1.运行效果如图所示 2.实现代码如下 <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <t...
触发模态弹出窗2种方法
qkx2719549090的博客
05-04 3180
方法一 众所周知，模态弹出窗在页面加载完成时，是被隐藏在页面中的，只有通过一定的动作（事件）才能触发模态弹出窗的显示。在Bootstrap框架中实现方法有2种，接下来分别来介绍这2种触发模态弹出窗的使用方法。 声明式触发方法： 方法一：模态弹出窗声明，只需要自定义两个必要的属性：data-toggle和data-target（bootstrap中声明式触发方法一般依赖于这些自定义的d
BootStrap-CSS样式_插件_模态框插件
LoveyourselfJiuhao的博客
01-01 506
模态框（Modal）插件  模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容， 可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。  提示：如果您想要单独引用该插件的功能，那么您需要引用 modal.js。或者，正如 Bootstrap 插件概览 一章中 所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。...
bootstrap模态框靠近触发
最新发布
11-18
以下是使用Bootstrap实现模态框靠近触发的方法： 1. 在触发模态框的按钮上添加data属性，指定目标模态框的ID，例如： ```html <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开模态框</button> ``` 2. 在模态框的HTML代码中，添加以下class： ```html <div class="modal-dialog modal-dialog-centered"> ``` 这将使模态框在屏幕中垂直和水平居中。 3. 如果您想要模态框靠近触发按钮，可以使用JavaScript来实现。在模态框的show.bs.modal事件中，获取触发按钮的位置，然后将模态框的位置设置为该位置。例如： ```javascript $('#myModal').on('show.bs.modal', function (e) { var button = e.relatedTarget; // 获取触发模态框的按钮 var modal = $(this); modal.css('display', 'block'); // 显示模态框 modal.css('top', button.offsetTop + 'px'); // 设置模态框的top位置 modal.css('left', button.offsetLeft + 'px'); // 设置模态框的left位置 }); ``` 这将使模态框出现在触发按钮的位置。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值