bootstrap 模态 modal 小例子

<html>
 <head>
  <meta charset="utf-8" />
  <title>Bootstrap 实例 - 模态框（Modal）插件</title>
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 

 </head>
 <body>
  <h2>创建模态框（Modal）</h2> 

  <button class="btn btn-primary btn-lg"   data-remote="false" href="d.html" data-toggle="modal" data-target="#myModal"> 开始演示模态框 </button> 

  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
    <div class="modal-content">
     <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times; </button>
      <h4 class="modal-title" id="myModalLabel"> 模态框（Modal）标题2 </h4>
     </div>
            1<br/>2<br/>3<br/>
     <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button>
      <button type="button" class="btn btn-primary"> 提交更改 </button>
     </div>
    </div>
   </div>
  </div>  

 </body>
</html>

时间： 2024-11-10 06:28:46

bootstrap 模态 modal 小例子的相关文章

vue +bootstrap 写的小例子

最近vue挺火,最近也不是特别忙,就学习了下. vue和angular非常像都是MVVM.道理都是想通的,就是语法的差异我觉得vue和angular区别: 1.vue更轻,更便捷,适用于移动开发 2.vue更简单.. angular和vue指令的差别大致就是 ng-xxx和v-xxx. vue是用过new Vue创建实例,然后在属性data绑定数据,在属性methods里添加方法. vue的循环遍历是 v-for="" ,事件是 v-on:clicl ="": 直

bootstrap打开模态modal窗口引起页面抖动解决办法

在使用bootstrap的modal模态窗口组件时,触发后会发现页面有抖动现象.这是因为它隐藏了浏览器滚动条,页面就相当于变宽了,关闭模态窗口后,页面又出现滚动条,页面又变窄了,这一伸一缩就会使页面产生抖动现象.我的解决方法很简单,就是干掉隐藏滚动条的代码.总共删除bootstrap.js文件中6行代码就可以了. 以bootstrap3.3.6版本中未压缩的bootstrap.js文件为例. 第一处在971行左右,删除这3句 this.checkScrollbar() this.setScrol

【转】bootstrap模态框（modal)使用remote方法加载数据，只能加载一次的解决办法

http://blog.csdn.net/coolcaosj/article/details/38369787 bootstrap的modal中,有一个remote选项,可以动态加载页面到modal-body中有两种方法,一种是使用链接,另一种就是使用脚本. 1 使用链接 <a href="user/userDetail.jsp" data-toggle="modal" data-target="#myModal">打开对话框<

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模态框实现浮动层

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

Bootstrap模态弹出框

前面的话在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作,也有可能弹出的是一张图片.本文将详细介绍Bootstrap模态弹出框结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,其主要又包括三个部分: ?

Bootstrap模态框按钮

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

Bootstrap 模态对话框只加载一次 remote 数据的解决办法

前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中,但是它只会加载一次,不过通过在事件中调用 removeData() 方法可以解决这个问题. Bootstrap modals dialog hidden removeData 目录[-] 1. Bootstrap 模态对话框和简单使用 2. 使用 remote 选项让模态对话框加载页面到 .modal-body 中 2.1