脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap 模态框

浅析BootStrap模态框的使用(经典)

 更新时间：2016年04月29日 10:22:13   作者：CQ_LQJ  
Bootstrap Modals（模态框）是使用定制的 Jquery 插件创建的。本文给大家介绍BootStrap模态框的使用，感兴趣的朋友一起学习吧

BootStrap模态框简单概述

Bootstrap Modals（模态框）是使用定制的 Jquery 插件创建的。它可以用来创建模态窗口丰富用户体验，或者为用户添加实用功能。您可以在 Modals（模态框）中使用 Popover（弹出框）和 Tooltip（工具提示插件）。

1,Bootstrap 模态对话框和简单使用

div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>对话框标题</h3>
</div>
<div class="modal-body">
<p>对话框主体</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">取消</a>
<a href="#" class="btn btn-primary" data-dismiss="modal">确定</a>
</div>
</div>

可以使用按钮或链接直接调用模态对话框，这是简单的用法：

<a href="#modal1" role="button" class="btn btn-primary btn-sm" data-toggle="modal">合同添加</a>

另外,当你需要让对话框能够在每次打开时表单数据清空,如下:

$('#modal1').modal('hide');
$("#modal1").on("hidden", function() {$('#form1')[0].reset();}); //添加合同后,清空表单操作

以上内容是小编给大家介绍的BootStrap模态框的使用，希望对大家有所帮助，欲了解更多精彩内容，敬请关注脚本之家网站！

您可能感兴趣的文章:

相关文章

  • 第十篇BootStrap轮播插件使用详解

    第十篇BootStrap轮播插件使用详解

    Bootstrap 轮播插件是一种灵活的响应式的向站点添加滑块的方式。本文给大家介绍BootStrap轮播插件使用详解，非常不错具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-06-06
  • 深入理解JavaScript事件机制

    深入理解JavaScript事件机制

    事件机制是几乎所有开发语言都有的机制，并不是deviceone的独创，在某些语言称之为消息(Event),有些地方称之为(Message).接下来通过本文给大家介绍JS事件机制的理解 ，需要的朋友一起学习吧
    2023-04-04
  • 如何利用原生JS实现触摸滑动监听事件

    如何利用原生JS实现触摸滑动监听事件

    这篇文章主要给大家介绍了关于如何利用原生JS实现触摸滑动监听事件的相关资料,文中将实现的原理以及代码介绍的非常详细,需要的朋友可以参考下
    2021-06-06
  • 两个DIV等高的JS的实现代码

    两个DIV等高的JS的实现代码

    2007-12-12
  • D3.js 实现带伸缩时间轴拓扑图的示例代码

    D3.js 实现带伸缩时间轴拓扑图的示例代码

    这篇文章主要介绍了D3.js 实现带伸缩时间轴拓扑图的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • Jquery中删除元素的实现代码

    Jquery中删除元素的实现代码

    empty用来删除指定元素的子元素，remove用来删除元素，或者设定细化条件执行删除
    2011-12-12
  • 简单的仿Flash文字动画（兼容Mozilla）

    简单的仿Flash文字动画（兼容Mozilla）

    简单的仿Flash文字动画（兼容Mozilla）...
    2007-01-01
  • JavaScript字符串对象(string)基本用法示例

    JavaScript字符串对象(string)基本用法示例

    这篇文章主要介绍了JavaScript字符串对象(string)基本用法,结合实例形式分析了js字符串的添加、计算、获取、替换等操作实现技巧,需要的朋友可以参考下
    2017-01-01
  • JS中for,for...in,for...of和forEach的区别和用法实例

    JS中for,for...in,for...of和forEach的区别和用法实例

    JS遍历数组（循环数组）的方式有多种,可以使用传统的for循环,也可以使用升级版的for in循环,还可以使用Array类型的forEach() 方法,这篇文章主要给大家介绍了关于JS中for、for...in、for...of和forEach的区别和用法的相关资料,需要的朋友可以参考下
    2021-11-11
  • js事件监听机制(事件捕获)总结

    js事件监听机制(事件捕获)总结

    添加事件的js方法也很多，有直接加到页面结构上的，有使用一些js事件监听的方法，由于各个浏览器对事件冒泡事件监听的机制不同
    2014-08-08

最新评论