bootstrap模态框实例

下面是一个申请链接的实例效果图如下: 代码如下
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap模态框实例</title>
  8.     <!-- Bootstrap -->
  9.     <link href="css/bootstrap.min.css" rel="stylesheet">
  10.     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  11.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  12.     <!--[if lt IE 9]>
  13.       <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  14.       <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  15.     <![endif]-->
  16. </head>
  17. <body>
  18.     <a href="javascript:void(0);" data-toggle="modal" data-target="#myModal" data-backdrop="static">申请链接
  19.             </a>
  20.     <!--申请链接-->
  21.     <form action="__URL__/addLink" method="post" class="form-horizontal" id="askLink">
  22.         <!--模态框声名-->
  23.         <div class="modal  fade" id="myModal" tabindex="-1" style="color: #337AB7;">
  24.             <!--窗口声名-->
  25.             <div class="modal-dialog ">
  26.                 <!--内容声名-->
  27.                 <div class="modal-content">
  28.                  <!-----------------------------内容start--可以忽略-->
  29.                     <div class="modal-header">
  30.                         <button class="close" data-dismiss="modal">
  31.                             <span>&times;</span>
  32.                         </button>
  33.                         <h4 class="modal-title">申请链接</h4>
  34.                     </div>
  35.                     <div class="modal-body">
  36.                         <div class="form-group has-primary has-feedback">
  37.                             <label for="linkName" class="col-sm-3 control-label">网站名称</label>
  38.                             <div class="col-sm-8">
  39.                                 <input type="text" id="linkName" name="linkName" class="form-control" placeholder="如:静水博客" required="required">
  40.                             </div>
  41.                         </div>
  42.                         <div class="form-group has-primary has-feedback">
  43.                             <label for="linkUrl" class="col-sm-3 control-label">网站域名</label>
  44.                             <div class="col-sm-8">
  45.                                 <input type="text" id="linkUrl" name="linkUrl" class="form-control" placeholder="如:http://www.liuyanzhao.com/" required="required">
  46.                             </div>
  47.                         </div>
  48.                         <div class="form-group has-primary has-feedback">
  49.                             <label for="linkEmail" class="col-sm-3 control-label">博主邮箱</label>
  50.                             <div class="col-sm-8">
  51.                                 <input type="text" id="linkEmail" name="linkEmail" class="form-control" placeholder="如:847064370@qq.com" required="required">
  52.                             </div>
  53.                         </div>
  54.                     </div>
  55.                     <div class="modal-footer">
  56.                         <div class="form-group">
  57.                             <div class="col-sm-offset-2 col-sm-10">
  58.                                 <button type="button" class="btn btn-primary" onclick="checkForm()">提交申请»</button>
  59.                             </div>
  60.                         </div>
  61.                     </div>
  62.                     <!---------------------内容end--可以忽略--------------------->
  63.                 </div>
  64.             </div>
  65.         </div>
  66.     </form>
  67.     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  68.     <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
  69.     <!-- Include all compiled plugins (below), or include individual files as needed -->
  70.     <script src="js/bootstrap.min.js"></script>
  71.     <script type="text/javascript">
  72.         //模态框垂直居中
  73.         function centerModals() {
  74.             $('.modal').each(
  75.                 function (i) {
  76.                     var $clone = $(this).clone().css('display', 'block')
  77.                         .appendTo('body');
  78.                     var top = Math.round(($clone.height() - $clone.find(
  79.                         '.modal-content').height()) / 2);
  80.                     toptop = top > 0 ? top : 0;
  81.                     $clone.remove();
  82.                     $(this).find('.modal-content').css("margin-top",
  83.                         top - 50);
  84.                 });
  85.         }
  86.         $('.modal').on('show.bs.modal', centerModals);
  87.         $(window).on('resize', centerModals);
  88.     </script>
  89. </body>
  90. </html>

用法参考:

1.可以通过在 HTML 元素上设置 data-*的属性声明来控制效果。

2.当然,也可以在 JavaScript 直接设置

  本文地址:http://liuyanzhao.com/614.html 转载请注明

发表评论

目前评论:1