一周乱弹(1,bootstrap 同时展示多个模态框顺序2.复选框 全选例子)

来源:互联网 发布:java io流读取视频 编辑:程序博客网 时间:2024/05/17 23:34

1,bootstrap 同时展示多个模态框顺序
页面:


<%--模板--%>    <div class="modal fade" id="userDepartModal" tabindex="-1" role="dialog"         aria-labelledby="userDepartModalLabel" aria-hidden="true">        <div class="modal-dialog modal-lg">            <div class="modal-content">                <div class="modal-header">                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times" style="color: red;"></i></button>                    <h4 class="modal-title" id="userDepartModalLabel">母版编辑</h4>                </div>                <div class="modal-body" style="height: 600px;overflow: auto">                    <form class="form-horizontal" role="form" id="add-depart-form" action="security/user-depart.json" method="post">                        <ul class="list-group">                            <ul id="treeDemo" class="ztree" style="margin-top:0; width:160px; height:auto;"></ul>                        </ul>                        <input type="hidden" name="uid" id="uid"/>                    </form>                </div>                <div class="modal-footer">                    <button type="button" onclick="add_dept();" class="btn btn-primary"><i class="fa fa-save"></i>保存</button>                    <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i>取消</button>                </div>            </div>        </div>    </div>    <%--模板 end--%>    <!-- 删除 -->    <div class="modal fade " id="delDataModal" tabindex="-1" role="dialog"         aria-labelledby="deleteModalLabel" aria-hidden="true">        <div class="modal-dialog " >            <div class="modal-content">                <div class="modal-header">                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times" style="color: red;"></i></button>                    <h4 class="modal-title" id="deleteModalLabel">删除数据</h4>                </div>                <div class="modal-body">确认删除所选数据么?</div>                <div class="modal-footer">                    <button type="button" class="btn btn-danger" id="delete"><i class="fa fa-trash"></i>确认</button>                    <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i>取消</button>                </div>            </div>        </div>    </div>    <!-- /.删除 -->

以上为两个模态框,在下面的会显示在顶部.
如图:
这里写图片描述
如果 删除的模态框放在上面则会被遮挡.


2.复选框 全选例子

 $("#selectAll").click(function () {                var flag = $(this).prop("checked")                if(flag) {                    $("#tBody tr").css("background-color","#337ab7");                    $("#tBody tr :input").prop("checked", true);                }else {                    $("#tBody tr").removeAttr("style");                    $("#tBody tr :input").prop("checked", false);                }            });
0 0
原创粉丝点击