参考: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">×</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">×</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>