bootstrap中模态框的使用，实现酷炫的弹出效果，可以实现form表单，提示框等等

前言：

这是我的第四篇垃圾博文，前三篇目前看来只有13次浏览量，我自己看的好像就占了一大半，不过还是要不要脸的写下去；

正文：

问题：我们作为后台开发人员，经常会做一些表单提交，最常见的是对数据库的的增删改查，大部分同学做修改的增加的时候都会选择重新跳转到一个新的页面，这样既不简洁又不高大上，bootstrap模态框完美的解决掉这个问题；

第一步，引入bootstrap的cs和js

第二步，实例展示：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开示例窗口</button>

首先我们可以看到这个botton按钮有两个属性是data-toggle="model"   data-target="#myModel"；第一个属性代表我可以调取并展示一个模态框，第二个属性表示我要展示的哪一个模态框，用id来标识。

接下来介绍一下具体怎样调取哪一个模态框，以及模态框出现的效果是怎么的；

<div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
           <div class="modal-dialog">
                 <div class="modal-content animated bounceInRight">
                       <div class="modal-header">
                             <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span>
                              </button>
                                  <i class="fa fa-laptop modal-icon"></i>
                                  <h4 class="modal-title">窗口标题</h4>
                                  <small class="font-bold">这里可以显示副标题。
                             </small></div><small class="font-bold">
                    <div class="modal-body">
                     <p><strong>H+</strong> 是一个完全响应式，基于Bootstrap3.4.0最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。</p>
                        <div class="form-group"><label>Email</label> <input type="email" placeholder="请输入您的Email" class="form-control"></div>
                              </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                                            <button type="button" class="btn btn-primary">保存</button>
                                        </div>
                                    </small></div><small class="font-bold">
                                </small></div><small class="font-bold">
                            </small></div>

点击botton按钮调取下面的模态框，第一点需要.inmodal类（首行代码中的inmodal-class），第二点需要一个botton中定义好的id（myModal）；这两点就可以实现了；

模态框的样式问题探讨；

模态框慢慢浮现效果：最外层div需要添加一个class为fade代码展示

<div class="modal inmodal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">

模态框的大小取决于下一层div(第二层)的class：

.modal-dialog modal-lg   .modal-dialog modal-sm  .modal-dialog分别为大、小、中

 模态框动画效果取决下一层div（第三层）的class；

modal-content animated bounceInRight   右边滑出效果                                                          

modal-content animated flipInY  沿x轴旋转效果

modal-content animated fadeIn   浮现效果

多的不说了，大家尝试一下就好了，很简单的；

后续

第一件事我想说给华为做外包的是真的坑啊，华为那边的人个个都是大爷，每天爱答不理的，总把自己摆在高高位置上，对你是牛逼，但我们也是有尊严的，我发誓呆一年走人，生气；第二件事明天就要高考了，好开心啊，每到这时候就想起自己高考的那个时候，是真的惨，顶着30,40度的高温，吃不好睡不好，那两天真是撑过去的。今天下雨了，估计明天会是一个好天气吧，祝莘莘学子凯旋；四年之后来找我敲代码哈，开心；