[原]经典bootstrap模态框使用文章

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();}); //添加合同后,清空表单操作
时间: 2024-12-13 03:45:34

[原]经典bootstrap模态框使用文章的相关文章

去除BOOTSTRAP模态框半透明阴影

当使用bootstrap模态框默认自带半透明阴影,如果想要去除阴影,需要怎么做呢? 今天在项目中我遇到了这个问题,想要去除模态框的阴影,试了好久都没解决.后来问同事的时候才知道,当模态框弹出后,会加上这样一句代码: <div class="modal-backdrop  in"></div> 案例:自带半透明阴影的模态框 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta char

Bootstrap 模态框、轮播 结合使用

Bootstrap 模态框和轮播分开使用的教程网上很多.但是两者结合使用的例子和资料很少.两者结合使用时,开始我遇到了不少bug,现在分享给大家. 我的这个例子是把图片轮播嵌入到模态框里. 最后的效果如下图:点击页面上按钮,弹出模态框,模态框里的图片开始轮播,点击旁边空白位置,模态框消失. 代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 轮播.模态框</title> <link

Bootstrap模态框按钮

1.触发模态框弹窗的代码 这里复制了一段Bootstrap模态框的代码 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button> <!-- 模态框(Modal) --

Bootstrap 模态框(也可以说的弹出层)

最近在尝试使用bootstrap的模态框 使用模态框主要要引入一下几个js和css: bootstrap.css jquery.1.9.1.js(这个可以灵活选择) bootstrap.js html页面的写法如下: <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"> <script src="bootstrap/js/j

关于手动关闭BootStrap模态框

在网上找手动关闭BootStrap模态框的解决方法,说是(需要引用bootstrap.js等): $("#myModal").modal('hide'); 但是我发现我的只能关闭 , 不能关闭下面那半透明层.找了下发现是出现这两行代码的缘故. <div class="modal-backdrop fade in"></div> <div class="modal-backdrop fade in"></d

bootstrap模态框远程加载网页的正确处理方式

bootstrap模态框远程加载网页的方法 在bootsrap模态框文档里给出了这个方法: 使用链接模式 <a data-toggle="modal" href="tieniu.php" data-target="#modal">Click me</a> 使用脚本模式: $("#modal").modal({ remote: "tieniu.php" }); 没有给出任何实例,这种用

使用bootstrap模态框实现浮动层

authour: 陈博益 updatetime: 2015-04-22 06:52:15 friendly link: http://v3.bootcss.com/javascript/#modals 目录: 1,bootstrap模态框的使用示例 2,注意点 1,下面是一个简单的例子说明bootstrap模态框的使用: 1 <!DOCTYPE html> //modal.html 2 <html xmlns="http://www.w3.org/1999/xhtml"

第二百四十三节,Bootstrap模态框插件

Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一.基本使用 使用模态框的弹窗组件需要三层 div 容器元素: 1分别为 modal(模态声明层). 2dialog(窗口声明层). 3content(内容层). 在内容层里面,还有三层: 1分别为 header(头 部). 2body(主体). 3footer(注脚). modal样式class类,写在声明模态框<div

JavaScript:bootstrap 模态框的简单应用

最近用上了bootstrap这个强大的前端框架,有空来总结一下.这里记录下模态框的简单应用. 首先,要在页面中引入相应的js.css文件 1 <link href="css/bootstrap.css" rel="stylesheet" type="text/css" /> 2 <script type="text/javascript" src="js/jquery.min.js">