modal框代码源码

原创 喜欢吃兔头 随笔 web端代码样式 173阅读 2017-05-12 11:11:09 举报

时间:2017-05-11
描述:模态框代码源码
<div class="modal fade" id="myModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width: 65%;"><!--width可根据实际情况进行修改-->
<div class="modal-content ">
<div class="modal-header ">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<span class="glyphicon glyphicon-remove " ></span>
</button>
<div class="modal-title" id="myModalLabel">

                                        <div class="md_title ">
                                            <span class="glyphicon glyphicon-plus color_plus"></span>&nbsp;机构新增
                                            <div class="clearfix"></div>
                                        </div>
                                    </div>
                                </div>

                                <form class="form-horizontal md_padding" role="form">

                                    <div class="form-group">
                                        <label class="col-sm-2   control-label font_normal"><span>账户编号</span></label>
                                        <div class="col-sm-3 ">
                                            <input class="form-control " type="text" placeholder="请输入..." />
                                        </div>
                                        <label class="col-sm-2 col-sm-push-1  control-label font_normal"><span>客户姓名</span></label>
                                        <div class="col-sm-3 col-sm-push-1 ">
                                            <input class="form-control " type="text" placeholder="请输入..." />
                                        </div>

                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label font_normal"><span>机关单位</span></label>
                                        <div class="col-sm-3">
                                            <input class="form-control " type="text" placeholder="请输入..." />
                                        </div>
                                        <label class="col-sm-2 col-sm-push-1 control-label font_normal"><span>输入框名字</span></label>
                                        <div class="col-sm-3 col-sm-push-1">
                                            <input class="form-control " type="text" placeholder="请输入..." />
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label font_normal"><span>输入框名字</span></label>
                                        <div class="col-sm-3">
                                            <input class="form-control " type="text" placeholder="请输入..." />
                                        </div>
                                        <label class="col-sm-2 col-sm-push-1 control-label font_normal"><span>输入框名字</span></label>
                                        <div class="col-sm-3 col-sm-push-1">
                                            <input class="form-control " type="text" placeholder="请输入..." />
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label font_normal"><span>输入框名字</span></label>
                                        <div class="col-sm-3">
                                            <input class="form-control " type="text" placeholder="请输入..." />
                                        </div>
                                        <label class="col-sm-2 col-sm-push-1 control-label font_normal"><span>输入框名字</span></label>
                                        <div class="col-sm-3 col-sm-push-1">
                                            <input class="form-control " type="text" placeholder="请输入..." />
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label font_normal"><span>输入框名字</span></label>
                                        <div class="col-sm-3">
                                            <input class="form-control " type="text" placeholder="请输入..." />
                                        </div>
                                        <label class="col-sm-2 col-sm-push-1 control-label font_normal"><span>输入框名字</span></label>
                                        <div class="col-sm-3 col-sm-push-1">
                                            <select type="text" class="form-control">
                                                <option value="1">总行本部</option>
                                                <option value="2">董事长室</option>
                                                <option value="3">行长室</option>

                                            </select>
                                        </div>
                                    </div>
                                </form>

                                <div class="modal-footer fo">
                                    <button type="button" class="btn btn-default md_button" data-dismiss="modal">
                            关闭
                            </button>
                                    <button type="button" class="btn btn-primary" data-dismiss="modal">
                            保存
                            </button>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                    </div><!-- /.modal -->

触发事件代码:
<button class="btn" data-toggle="modal" data-target="#myModal"></button>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复