bootstrap模态框垂直居中效果

来源：互联网发布：动易cms后台登录密码编辑：程序博客网时间：2024/05/01 14:23

先上效果图
就是一个点击弹窗

先上jquery代码

    //模态框垂直居中    function centerModals() {        $('.modal').each(                function(i) {                    var $clone = $(this).clone().css('display', 'block')                            .appendTo('body');                    var top = Math.round(($clone.height() - $clone.find(                            '.modal-content').height()) / 2);                    top = top > 0 ? top : 0;                    $clone.remove();                    $(this).find('.modal-content').css("margin-top",                            top - 50);                });    }    $('.modal').on('show.bs.modal', centerModals);    $(window).on('resize', centerModals);

html代码

<!--登陆弹窗-->    <form action="__URL__/doLogin" method="post" class="form-horizontal">        <!--模态框声名-->        <div class="modal" id="myModal" tabindex="-1">            <!--窗口声名-->            <div class="modal-dialog modal-sm">                <!--内容声名-->                <div class="modal-content">                    <div class="modal-header">                        <button class="close" data-dismiss="modal">                            <span>&times;</span>                        </button>                        <h4 class="modal-title">用户登录</h4>                    </div>                    <div class="modal-body">                        <div class="form-group has-success has-feedback">                            <label for="username" class="col-sm-3 control-label">账号</label>                            <div class="col-sm-9">                                <span class="glyphicon glyphicon-user form-control-feedback"                                    aria-hidden="true"></span> <span id="inputSuccess3Status"                                    class="sr-only">(success)</span> <input type="text"                                    id="username" name="username" class="form-control"                                    placeholder="请输入您的用户名" title="可包含中文数字和常用字符"                                    onkeydown="if(event.keyCode==32||event.keyCode==13){return false;}">                                <!-- 禁用空格和回车 -->                            </div>                        </div>                        <div class="form-group has-success has-feedback">                            <label for="password" class="col-sm-3 control-label">密码</label>                            <div class="col-sm-9">                                <span class="glyphicon glyphicon-lock form-control-feedback"                                    aria-hidden="true"></span> <span id="inputSuccess3Status"                                    class="sr-only">(success)</span> <input type="password"                                    id="password" name="password" class="form-control"                                    maxlength="12" placeholder="请输入您的密码" oncopy="return false"                                    oncut="return false" onpaste="return false" title=""                                    onkeydown="if(event.keyCode==32||event.keyCode==13){return false;}">                            </div>                        </div>                    </div>                    <div class="modal-footer">                        <div class="form-group">                            <div class="col-sm-offset-2 col-sm-10">                                <button type="submit" class="btn btn-success" id="login">现在登录                                    »</button>                            </div>                        </div>                    </div>                </div>            </div>        </div>    </form>

链接：http://liuyanzhao.com/Article/id/112

0 0