Html中模态框（弹出框）使用入门

作为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">&times;</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模态框存在编辑器变性，看怎么解决