如何使用模态框

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

Bootstrap Modals(模态框)是使用定制的Jquery插件创建的，用来创建模态窗口丰富用户体验。页面中的模态框一般分为注册模态框、变更模态框、删除（信息提示）模态框三种基本模态框。以注册模态框为例子，详细介绍。

注意：创建模态框需要Jquery、Bootstrap CSS和JavaScript等文件

<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>

<script src="js/jquery-accordion-menu.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.css"/>

1.创建 注册按钮 点击 注册按钮 注册模态框出现

<button class="btn btn-primary btn-lg data-toggle="modal" data-target="#addAttribute">新增注册</button>

           注：黄色背景色为打开模态框

2．创建注册模态框，模态框前几层div，一定要加上

      <div class="modal fade" id="addAttribute" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">

           <div class="modal-dialog">

         <div class="modal-content modal-content_1">

         ……

         ……

 

     

3．在上面几层div的包裹下，写出模态框的头部div  ----- modal-header

         <div class="modal-header">     </div>

 

 

4.主要内容写在<div class="modal-body">内

     <div class="modal-body">

         <div></div>

         <div></div>

         ……

      </div>

 

5.模态框以<form>表单提交，模态框最下方为按钮

   <button type="submit" class="btn btn-primary col-sm-2 modal-button" style="margin-left: 100px;right:40px;" >确认</button>

<button type="button" class="btn btn-default col-sm-2 modal-button" data-dismiss="modal" onclick="closeModal()">取消</button>

 

 

6. <button> 所在div为模态框底部div  modal-footer

      <div class="modal-footer" style="margin-top: 20px;">

 

来源：oschina

链接：https://my.oschina.net/u/2404345/blog/673977