Bootstrap Modal-Bootstrap模态框

最新推荐文章于 2021-06-06 17:11:22 发布

shandian84

最新推荐文章于 2021-06-06 17:11:22 发布

阅读量913

点赞数

分类专栏： jquery 文章标签： Bootstrap jquery mobile 弹出窗

jquery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

介：Bootstrap框架简洁、直观、强悍、移动设备优先的前端开发框架，让web开发更迅速、简单。在这里将以最简洁的方式介绍Bootstrap框架的各个组件的实践示例。

Bootstrap组件：

Bootstrap Modal-Bootstrap模态框
Bootstrap tooltip-Bootstrap弹出框

一、Bootstrap Modal实践：

文档：Bootstrap Modal.htm

[html] view plain copy print ?

<!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.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Bootstrap Modal</title>
<link href="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="myModal" class="modal fade" 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">×</button>
<h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="bs-example" style="padding-bottom: 24px;">
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
</div>
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<title>Bootstrap Modal</title>

<!-- Bootstrap core CSS -->
<link href="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">


  </head>
  <body>

    <!-- sample modal content -->
    <div id="myModal" class="modal fade" 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">×</button>
            <h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
          </div>
          <div class="modal-body">
            <h4>Text in a modal</h4>
  
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="bs-example" style="padding-bottom: 24px;">
      <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
    </div><!-- /example -->

<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
  </body>
</html>

自定义BOOTSTRAP框架Modal的宽高和显示位置，请访问：http://qoophp.com/archives/187
源码下载： http://download.csdn.net/detail/rowisdom/6624741

shandian84

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap Modal-Bootstrap模态框

介：Bootstrap框架简洁、直观、强悍、移动设备优先的前端开发框架，让web开发更迅速、简单。在这里将以最简洁的方式介绍Bootstrap框架的各个组件的实践示例。Bootstrap组件：Bootstrap Modal-Bootstrap模态框Bootstrap tooltip-Bootstrap弹出框一、Bootstrap Modal实践：文档：Bootstr
复制链接

扫一扫