作为html学习学习模态框需要二步：
效果图
第一步学习HTML中 div的弹出
①触发按钮 <input class=”btn btn-success” id=”addType” value=”增加” type=”button” />
②HTML代码
#typeView,#musicView{ display:none; border:1em solid #3366ff; height:auto; width:%; left:%; top:%; position:absolute; <!-- --> z-index:; <!-- 层级优先级--> background:white;}<div id="typeView"> <label class="quit glyphicon glyphicon-off ">取消</label> <form id="f_type" method="post" enctype="multipart/form-data"> <div class="form-group"> <label>类型名字</label> <input type="text" name="T_Name" id="T_Name" class="form-control" /> <input type="/> </div> <div class="form-group"> <label>备注</label> <textarea name="T_Remark" id="edit" class="form-control"></textarea> </div> <div class="form-group"> <input type="button" class="form-control btn btn-success" id="bt_addType" value="增加" /> </div> </form></div>
③触发JQ事件
$("#addType").click(function () { var edit = new wangEditor('edit').create(); $("#typeView").show(); })
第二步学习BOOTStrap3中的模态框
效果图：
1.创建模态框
<div class="modal fade" id="adminView" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">用户管理</h4> </div> <div class="modal-body"> <form action="/api/admin/" class="" method="post" id="Form_AdminView" type=""> <input type="hidden" id="Adm_Id" name="Adm_Id" /> <div class="form-group"> <label>名字</label> <input type="text" class="form-control" name="Adm_Name" id="Adm_Name" /> </div> <div class="form-group"> <label>账号</label> <input type="text" name="Adm_Card" class="form-control" id="Adm_Card" /> </div> <div class="form-group"> <label>密码</label> <input type="text" name="Adm_Pwd" class="form-control" id="Adm_Pwd" /> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary" id="Btn_AdminView">修改</button> </div> </div> </div></div>
2.调用使用模态框
$("#btn_AddAdmin").click(function () { //操作类型 $("#Form_AdminView").attr("type", "add"); //重置输入框内的值 $("#Form_AdminView").find("input").val(""); //显示模态框 $("#adminView").modal("show"); });<!-- 隐藏 $("#adminView").modal("hide") -- >
试用版模态框的时候出现的问题：
1.模态框用来编辑或增加，如果add/edit用同一个个模态框，就会存在上一次的值保留的问题 b
解决：$(“form > input”).val(“”) =》form表单清空
2016.5.12
问题2：用B3模态框存在编辑器变性，看怎么解决
