`
Lstoryc
  • 浏览: 75660 次
文章分类
社区版块
存档分类
最新评论

Bootstrap 实现 modal 居中

阅读更多

Bootstrap version: 3.1.1

 

<div class="modal fade" id="revECheModal" tabindex="-1" role="dialog" aria-labelledby="revECheModTitle" 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">&times;</button>
        <h4 class="modal-title" id="revECheModTitle">Revoke Cheque No.</h4>
      </div>
      <form id="otpForm" role="form">
        <div class="modal-body">
          <div class="form-group">
            <br>Are you sure to revoke this e-cheque ?</div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Confirm</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">&nbsp;Close&nbsp;</button>
        </div>
      </form>
    </div>
  </div>
</div>

  

$("div[role='dialog']").on("show.bs.modal", function() {
    // 具体css样式调整
    $(this).css({
        "display": "block",
        "margin-top": function() {
            return ($(this).height() / 3);
        }
    });
});

 

分享到:
评论

相关推荐

    bootstrap 模态框(modal)实现水平垂直居中显示

    主要为大家详细介绍了bootstrap 模态框modal实现水平垂直居中显示,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    Bootstrap Modal遮罩弹出层(完整版)

    之前发表过一篇文章叫Bootstrap Modal弹窗代码,其实那个只是一个弹出层代码而已,并不是仿造Bootstrap的,Bootstrap modal是给外层添加固定fixed,然后内容使用自适应靠上居中方式。今天分享的这篇文章正是这种方式...

    Bootstrap弹出框(modal)垂直居中的问题及解决方案详解

    使用过bootstrap modal(模态框)组件的人都有一种困惑, 好好的一个弹出框怎么就无法垂直居中了呢?刚巧在做一个eit项目,由于此项目里面一些框架要遵循nttdata的一些规则,故用到了Bootstrap这个东东,第一次碰到...

    bootstrap modal弹出框的垂直居中

    本人前端菜鸟,公司项目尝试采用bootstrap,我身先士卒为同事趟“坑”,无奈UI妹子刁难非得让modal弹出框垂直居中,为了前端开发岗位的荣誉,花时间满足之。 最先就是百度咯,方法,就是修改源码 that.$element....

    bootstrap3-dialog可用于angularJS+bootstrap前段的弹框alert

    本实例参考了其他人的例子,并对...bootstrap.min.css:.modal-dialog{width:600px;margin:300px auto} bootstrap-dialog.min.css:.bootstrap-dialog .bootstrap-dialog-message{font-size:14px;text-align: center;}

    BootStrap模态框不垂直居中的解决方法

    本文实例为大家分享了BootStrap模态框不垂直居中的解决方法,供大家参考,具体内容如下 解决问题:BootStrap自带的模态框不垂直居中 解决方案:调用BootStrap为我们提供的方法$(‘.modal’).on(‘show.bs.modal’, ...

    bootstrap模态框垂直居中效果

    //模态框垂直居中 function centerModals() { $('.modal').each( function(i) { var $clone = $(this).clone().css('display', 'block') .appendTo('body'); var top = Math.round(($clone.height() - $clone...

    Bootstrap模态框(modal)垂直居中的实例代码

    主要介绍了Bootstrap模态框(modal)垂直居中的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下

    bootstarp modal框居中显示的实现代码

    主要介绍了bootstarp modal框居中显示的实现代码,需要的朋友可以参考下

    Bootstrap官网教程整理

    Bootstrap 模态框(Modal)插件 203 用法 203 选项 206 方法 206 事件 208 Bootstrap 下拉菜单(Dropdown)插件 212 用法 212 选项 215 方法 215 Bootstrap 滚动监听(Scrollspy)插件 218 用法 218 选项 221 方法 ...

    Boostrap实现的登录界面实例代码

    代码实现起来其实不难,但是碰到个问题,就是Bootstrap的布局控制好像用.col类难以实现居中显示,虽然可以用modal(模态框)实现弹出居中,但是我暂时不想用modal框。发现问题后,第一想法是自己再定义个css进行一个...

Global site tag (gtag.js) - Google Analytics