关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。
HTML
创建弹出层按钮。
<a class="btn btn-sm btn-primary" onclick="$('#modal_box').modal('toggle');"> 创建用户 </a>弹出层表单。
<div class="modal fade" id="modal_box" tabindex="-1" role="dialog" aria-labelledby="modal_delLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">消息提示</h4> </div> <div class="modal-body" style="width:330px;margin: 30px auto"> 用户名： <input type="text" value="" id="name" style="width:240px;border:1px solid #ccc;padding:5px 8px" autocomplete="off"/> </div> <div class="modal-footer"> <button class="btn btn-danger btn-sm ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false" onclick="addUser()"> <span class="ui-button-text"> <i class="icon-ok bigger-110"></i> 确 定 </span> </button> <button class="btn btn-sm ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false" data-dismiss="modal"> <span class="ui-button-text"> <i class="icon-remove bigger-110"></i> 取 消 </span> </button> </div> </div> </div> </div>
引入jQuery库和boostrap.js
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="bootstrap.min.js"></script>
| 参数 | 描述 | 默认值 |
| backdrop | Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click. | true |
| keyboard | 键盘上的 esc 键被按下时关闭模态框。 | true |
| show | 模态框初始化之后就立即显示出来。 | true |
| remote | 如果提供的是 URL，将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容（只加载一次）并插入 .modal-content 内。如果使用的是 data 属性 API，还可以利用 href 属性指定内容来源地址。下面是一个实例： | false |
系统已开启自动识别垃圾评论机制，识别到的自动封号，下载出错或者资源有问题请联系全栈客服QQ 1915635791