触发模态弹出窗2种方法
来源:互联网 发布:linux培训多少钱 编辑:程序博客网 时间:2024/05/22 06:09
方法一
众所周知,模态弹出窗在页面加载完成时,是被隐藏在页面中的,只有通过一定的动作(事件)才能触发模态弹出窗的显示。在Bootstrap框架中实现方法有2种,接下来分别来介绍这2种触发模态弹出窗的使用方法。
声明式触发方法:
方法一:模态弹出窗声明,只需要自定义两个必要的属性:data-toggle和data-target(bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle="" 或者 data-dismiss="")。例如:
<!-- 触发模态弹出窗的元素 --><button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">点击我会弹出模态弹出窗</button><!-- 模态弹出窗 --><div class="modal fade" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <!-- 模态弹出窗内容 --> </div> </div></div>
注意以下事项:
1、data-toggle必须设置为modal(toggle中文翻译过来就是触发器);
2、data-target可以设置为CSS的选择符,也可以设置为模态弹出窗的ID值,一般情况设置为模态弹出窗的ID值,因为ID值是唯一的值。
方法二:
触发模态弹出窗也可以是一个链接<a>元素,那么可以使用链接元素自带的href属性替代data-target属性,如:
<!-- 触发模态弹出窗的元素 --><a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >点击我会弹出模态弹出窗</a><!-- 模态弹出窗 --><div class="modal fade" id="mymodal" > <div class="modal-dialog" > <div class="modal-content" > <!-- 模态弹出窗内容 --> </div> </div></div>
不过建议还是使用统一使用data-target的方式来触发。
0 0
- 触发模态弹出窗2种方法
- bootstrap模态弹出框学习笔记(1-7 模态弹出框--触发模态弹出窗2种方法)
- 模态弹出框--JavaScript触发时的参数设置(一)
- 模态弹出框--JavaScript触发时的参数设置(二)
- js触发弹出层
- 多态的触发方法
- 防止window.showModalDialog 打开的页面 触发服务器端按钮事件时弹出新页面的方法
- UE4蓝图案例:鼠标触发特定物体后弹出特定图片的方法
- UE4蓝图案例:鼠标触发特定物体后弹出特定图片的方法
- 几种触发点击事件的方法
- Swing触发事件的3种方法
- jquery 触发a标签点击事件,弹出页面;不被浏览器屏蔽拦截的打开窗口的方法
- Cocoa触发方法调用的几种方法
- 实现弹出模态窗口摸管理的方法
- input触发弹出层,实现select 效果
- android 消息触发dialog弹出问题
- 2种快捷菜单的设计方法(右键弹出)
- UIButton 触发两个方法
- C代码回调java方法
- final关键字、多态的概念、抽象类、接口、利用抽象类或接口实现多态
- Java笔记
- 媒体和相机:媒体路由器:简介
- Tensorflow:基于LSTM生成藏头诗
- 触发模态弹出窗2种方法
- java转php 关于异常和错误的探索
- 浏览器User-Agent的详细信息
- 半路出家当和尚,挑桶水来煮点饭
- Matlab复杂LMI仿真实例
- 新建的MySQL出现的各种小问题
- JS定时器如何传递参数
- Utilizing multi-core processors in NS-2
- hdu 1009 FatMouse' Trade