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

Bootstrap模态对话框的简单使用

 更新时间：2016年04月29日 08:39:45   投稿：lijiao  
这篇文章主要为大家详细介绍了Bootstrap模态对话框的简单使用，感兴趣的小伙伴们可以参考一下

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

如果您想要单独引用该插件的功能，那么您需要引用 modal.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
1、用法
您可以切换模态框（Modal）插件的隐藏内容：
通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：
$('#identifier').modal(options)
2、简单实例

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();}); //添加合同后,清空表单操作

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助。

您可能感兴趣的文章:

相关文章

  • js实现ifram取父窗口URL地址的方法

    js实现ifram取父窗口URL地址的方法

    这篇文章主要介绍了js实现ifram取父窗口URL地址的方法,是javascript操作window.parent对象非常典型的应用技巧,需要的朋友可以参考下
    2015-02-02
  • javascript生成随机大小写字母的方法

    javascript生成随机大小写字母的方法

    这篇文章主要介绍了javascript生成随机大小写字母的方法,需要的朋友可以参考下
    2014-02-02
  • 使用纯javascript实现放大镜效果

    使用纯javascript实现放大镜效果

    本文给大家分享的是使用纯javascript实现放大镜效果的代码，并附上封装的步骤，做电商程序的小伙伴们一定不要错过。
    2015-03-03
  • 前端开发之便利店收银系统代码

    前端开发之便利店收银系统代码

    这篇文章主要介绍了社区便利店收银系统代码,使用前端初级开发者，代码很简单需要的朋友可以参考下
    2019-12-12
  • JavaScript实现旋转轮播图

    JavaScript实现旋转轮播图

    这篇文章主要为大家详细介绍了JavaScript实现旋转轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 浅谈window对象的scrollBy()方法

    浅谈window对象的scrollBy()方法

    本文给大家介绍的是windows对象中的scrollBy()的定义和使用方法，十分的细致全面，有需要的小伙伴可以参考下。
    2015-07-07
  • 微信小程序switch组件使用详解

    微信小程序switch组件使用详解

    这篇文章主要为大家详细介绍了微信小程序switch组件的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-01-01
  • webpack-dev-server的安装使用教程

    webpack-dev-server的安装使用教程

    这篇文章主要介绍了webpack-dev-server的安装使用教程，大家有个前提条件要清楚webpack-dev-server依赖webpack，我们需要先安装webpack，本文结合实例代码详细讲解,需要的朋友可以参考下
    2023-02-02
  • 微信小程序-滚动消息通知的实例代码

    微信小程序-滚动消息通知的实例代码

    本篇文章主要介绍了微信小程序-滚动消息通知的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JavaScript创建防篡改对象的方法分析

    JavaScript创建防篡改对象的方法分析

    这篇文章主要介绍了JavaScript创建防篡改对象的方法,结合具体实例形式分析了javascript基于不可扩展对象、密封的对象和冻结的对象实现防篡改对象的相关操作技巧,需要的朋友可以参考下
    2018-12-12

最新评论