bootstrap模态框

参考：https://blog.csdn.net/a951958951/article/details/78190827

https://www.jianshu.com/p/a470eefe7e26

触发：

data-toggle="modal" data-target=".addgoods" 对应下面模态框的id或者class

                    <button class="btn btn-primary btn-sm" data-toggle="modal" data-target=".addgoods"><--要和模态框对应-->
                        <i class="fa fa-plus fa-fw"></i>添加使用条件
                    </button>

模态框

模态框大体分为三个部分 

modal-header

modal-body

modal-footer

data-keyboard="false"。此举是设置按下ESC退出键无效

data-backdrop="static" ：阻止点击模态框以外的灰色背景而关闭模态框

属性 data-toggle="modal" data-target="#userModal" 是打开模态框。

data-dismiss="modal" ::关闭模态框

aria-labelledby : 对应下面的模态框标题栏的id  即下面的<h4 class="modal-title" id="myLargeModalLabel">添加使用条件</h4>

class="modal fade addgoods" 其中fade是弹出时的动画效果（淡入淡出效果）

aria-hidden="true" 默认隐藏模态框 当打开模态框时 值为false

类modal-content告诉bootstrap.js在哪里查找模态框的内容。在这个div内，我们需要放置前面提到的三个部分：头部，正文和页脚   

<form action="" class="form form-horizontal" id="form-Condition-add" method="post" role="form" novalidate="novalidate" onsubmit="return check_form()">
    <div class="modal fade addgoods" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" data-keyboard="false">
        <div class="modal-dialog modal-lg">
            <!--modal-lg 大模态框 modal-sm 小模态框 -->
            <div class="modal-content modal-lg">
                <!--modal-lg 大模态框 modal-sm 小模态框 类modal-content告诉bootstrap.js在哪里查找模态框的内容。在这个div内，我们需要放置前面提到的三个部分：头部，正文和页脚-->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myLargeModalLabel">添加使用条件</h4></div>
                <div class="modal-body">
                    <style>.c-red{color:red;}</style>
                    <div class="form-group">
                        <label for="type" class="col-sm-3 control-label">所属类别：</label>
                        <div class="col-sm-9">
                            <select class="select valid" name="type" size="1" id="type" aria-required="true" aria-invalid="false">
                                <option value="0" disabled="disabled">顶级类别</option>
                                <foreach name="type" item="vo">
                                    <option value="{$vo.typeid}">{$vo.belongs}</option></foreach>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="condition-name" class="col-sm-3 control-label">
                            <span class="c-red">*</span>条件名称：</label><!--for属性要和input等id对应鼠标点击这个描述时自动选中下面的input-->
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="condition-name" placeholder="请输入条件名称" name="conditionname"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div id="tip"></div>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">提交</button></div>
            </div>
        </div>
    </div>
</form>

 大体结构

<!-- 按钮：用于打开模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>
 
<!-- 模态框 -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
 
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">模态框头部</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
 
      <!-- 模态框主体 -->
      <div class="modal-body">
        模态框内容..
      </div>
 
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
 
    </div>
  </div>
</div>