Bootstrap 模态框插件modal的调用方式
调用方式
1、data属性调用
使用 data 属性调用模态对话框时，一般要设置两个属性，一个是 data-toggle 属性，另一个是 data-target 属性。
data-toggle 属性定义要触发的插件类型，对于模态对话框，必须将其值设置为 modal；data-target 属性定义要触发的对象，其值是一个选择器，但该选择器必须指向唯一的元素。
如果触发元素为按钮或其他元素，可以将 data-target 属性的值设置为模态对话框的 id 值。如，以下代码表示点击按钮会打开 id="myModal" 的模态对话框：
<!-- 触发按钮 --><button data-toggle="modal" data-target="#myModal">Launch demo modal</button><!-- 模态对话框 --><div class="modal hide fade" id="myModal">...</div>
如果触发元素为超链接，可以将 href 属性的值作为 data-target 属性的值。但是，为了保持统一，建议使用 data-target 属性。
<!-- 触发按钮 --><a data-toggle="modal" href="#myModal">Launch demo modal</a><!-- 模态对话框 --><div class="modal hide fade" id="myModal">...</div>
2、JavaScript调用
使用JavaScript调用模态对话框非常简单，仅用一行JavaScript代码即可。如，以下代码表示调用 id="myModal" 的模态对话框：
<script>$('#myModal').modal()</script>关于作者
歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。
Bootstrap 模态框插件modal的调用方式相关推荐
- Bootstrap 模态框插件Modal 的事件
事件 Bootstrap模态框插件modal提供了 4 个事件,通过监听这些事件,可以对特定操作阶段的用户行为作出响应.这些事件及含义见表 5‑2. 表 5‑2 Bootstrap模态框插件modal ...
- Bootstrap 模态框插件Modal 的方法
方法 Bootstrap模态框插件Modal的方法主要用来打开.关闭.隐藏Bootstrap模态框插件Modal: 1..modal(options) 使用一个可选的对象参数 options 调用 B ...
- Bootstrap 模态框插件Modal 的选项
选项 Bootstrap模态框插件modal提供了 4 个选项,所有的选项都可以通过 data 属性或 JavaScript 进行设置.见表 5‑1: 表 5‑1 Bootstrap模态框插件moda ...
- Bootstrap 模态框（Modal）
#Bootstrap 模态框(Modal)插件 详细讲解 #####第一步: 加载框架: https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jque ...
- asp.net mvc 使用bootstrap的模态框插件modal
编译器:vs2012 jquery版本:jquery-1.10.2.js bootstrap:bootstrap.js v3.0.0,包含modal插件 我们要实现一个使用模态框展示从服务器获取的数据 ...
- Bootstrap 模态框（Modal）的属性及方法
用法 您可以切换模态框(Modal)插件的隐藏内容: 通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data- ...
- Bootstrap 学习之js插件（模态框（Modal）插件）
Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. ( ...
- 前端之bootstrap模态框
简介:模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. Modal简介 Modal实现弹出表单 M ...
- Bootstrap学习之模态框（Modal）插件
Bootstrap每天必学之模态框(Modal)插件,模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互 ...
最新文章
- 函数进阶学习之二 声明 定义
- 解决win10系统中截图异常放大的问题
- python3字符串转数字_Python 3.6.0 正式版发布附新特性说明
- 剑指 Offer 68 - II. （二叉树）二叉树的最近公共祖先
- 【转载保存】大型推荐系统架构图设计图
- 由于两家重要零件厂商的疫情，iPhone 13备货可能受影响
- 让你瘦不停的23个小细节 - 生活至上，美容至尚！
- centos下安装JAVA开发工具(1)------JDK
- xampp 中 mysql的相关配置
- 关于javaswing做的游戏的一点小总结x
- xp系统的无线配置服务器,Windows XP系统下无线网卡配置及安装
- 网易首支AI歌曲《醒来》发布：声音太逼真 能瞒过人类
- Android面试题汇总
- Graph U-Nets小结
- 面向对象实验——solitaire纸牌游戏
- Mac下brew的安装
- 【比特熊故事汇】6月MVP英雄故事|技术实践碰撞境界思维
- 20v转5v_12v转5v_5v转3.3v 5A用AH8316
- 计算机科学最权威的期刊和会议[转]
- 竞价推广关键词怎么选择?