浅析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模态框的使用,希望对大家有所帮助,欲了解更多精彩内容,敬请关注脚本之家网站!

相关文章

  • JS下载文件|无刷新下载文件示例代码

    JS下载文件|无刷新下载文件示例代码

    JS下载文件的实现在网上可以找到很多教程,不过本文为大家介绍的是无刷新下载文件,貌似更酷一点是吧
    2014-04-04
  • 详解ant-design-pro使用qiankun微服务

    详解ant-design-pro使用qiankun微服务

    这篇文章主要介绍了ant-design-pro使用qiankun微服务详解,其实微服务需要有主应用和子应用, 一个子应用可以配置多个相关联的主应用,配置方法都是一样的,对ant-design-pro微服务配置相关知识,感兴趣的朋友一起看看吧
    2022-03-03
  • javascript定义函数的方法

    javascript定义函数的方法

    javscript中定义和声明函数有三种方式:正常方法 构造函数 函数直接量。
    2010-12-12
  • 理解Javascript_10_对象模型

    理解Javascript_10_对象模型

    什么都不想说,一段代码两张图,解释一切。注:在此之前请阅读前面的系列博文
    2010-10-10
  • js去除空格的12种实用方法

    js去除空格的12种实用方法

    js去除空格的方法有很多,本文整理了12种比较实用方法在此与大家分享下
    2013-11-11
  • JavaScript实现经典贪吃蛇游戏

    JavaScript实现经典贪吃蛇游戏

    这篇文章主要为大家详细介绍了JavaScript实现经典贪吃蛇游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 详解JavaScript节流函数中的Throttle

    详解JavaScript节流函数中的Throttle

    函数节流,就是对会频繁触发的函数事件做一些限制,让这些函数可以在每隔一定的时间或者每次满足一定的条件下再触发。一般我们会给他起一个名字throttle。也就是节流的意思。一般这样的函数有 resize事件、ontouchmove事件等。
    2016-07-07
  • JavaScript常用脚本汇总(二)

    JavaScript常用脚本汇总(二)

    本文给大家分享的javascript常用脚本有把JavaScript中的伪数组转换为真数组、JavaScript设置主页功能、JavaScript收藏功能、javascript检测元素是否支持某个属性代码、创建和使用命名空间,有需要的小伙伴们快来看看吧。
    2015-03-03
  • js实现日期显示的一些操作(实例讲解)

    js实现日期显示的一些操作(实例讲解)

    下面小编就为大家带来一篇js实现日期显示的一些操作(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 详解CocosCreator中几种计时器的使用方法

    详解CocosCreator中几种计时器的使用方法

    这篇文章主要介绍了CocosCreator中几种计时器的使用方法,推荐使用schedule,功能多些,销毁时还能自动移除
    2021-04-04

最新评论