bootstrap模态框的简单使用demo

原创 2016年09月16日 20:52:27
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap模态框demo</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

  </head>
  <body>
    <h2>创建模态框(Modal)</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#register">
    开始演示模态框
</button>

<div class="modal fade in"   id="register" >
                <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h3 class="modal-title">标题</h3>
                </div>
                <div class="modal-body">
                    <p>正文</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-info" data-dismiss="modal">关闭</button>
                </div>
              </div>
            </div>
          </div>


    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  </body>
</html>

bootstrap之弹出框(模态框)的简单应用

弹出框是一个经常使用的组件,一般用于弹出提示信息,确认信息,表单等内容。 弹出框是浮动在页面之上的,弹出时其他页面元素不可被选中。 弹出框的基本结构:头部、内容、底部(常常是按钮) 基本用法: ...

关于BootStrap中Modal(模态框)使用心得

关于BootStrap中Modal(模态框)使用心得 一、modal使用: 1.1、登录bootstrap官网,点击下载Bootstrap 1.2、导入对应的样式文件css 1.3、导入对应的...

BootStrap模态框使用

各位大家好这是第一次写自己在学习BootStrap中的一些心得的,和总结。初次发博不好地方大家可以留言评论,博主一定多多改进。创建模态框(Modal) 开始演示模态框...

rails4使用bootstrap的模态框插件,结合ajax做出从弹出框选取内容返回给原页面的效果

rails4使用bootstrap的模态框插件,结合ajax做出从弹出框选取内容返回给原页面的效果。...
  • beslow
  • beslow
  • 2014年06月08日 23:30
  • 2426

Bootstrap使用模态框

静态模态框: × 选择文件 ...

Bootstrap模态框使用WebUploader点击失效问题解决

JSP代码 Bootstrap模态框 ...

Bootstrap 模态框的使用

Bootstrap 模态框的使用 官网中给的例子大概和我下面的一样,当点击修改时,会弹出模态框 div class="modal fade" id="myModal"tabindex="-1"...

模态框----Bootstrap Modals基础使用详解

最近项目中用到了Bootstrap模态框,收录下来: 一、引用的文件 前提是需要引用jquery哦: 二、举例样式 三、html引用规则  class="modal fade...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:bootstrap模态框的简单使用demo
举报原因:
原因补充:

(最多只允许输入30个字)