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

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模态框的水平垂直居中显示,我们可以采用以下两种方法: 方法1: 这种方法依赖于JavaScript事件监听器,特别是`shown.bs.modal`事件,该事件在模态框展示完成后触发。我们可以在这个事件的回调...

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

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

    bootstrap模态框垂直居中效果

    在本文中,我们将深入探讨如何实现Bootstrap模态框(Modal)的垂直居中效果,这是一种常见且实用的前端布局技巧。Bootstrap是一个流行的HTML、CSS和JS框架,它提供了丰富的组件和样式,使得开发者能快速构建响应式和...

    bootstrap modal弹出框的垂直居中

    在Bootstrap的默认设置中,Modal的垂直居中并不直接支持,需要通过一些技巧来实现。这里介绍两种常见的方法: 1. **修改源码方法**: 这种方法涉及到直接修改Bootstrap的JavaScript源码,通过计算Modal对话框(`....

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

    例如,若要让Modal居中,可以将`top`值设置为`auto`,并添加`margin: 0 auto`,以实现水平和垂直居中。如果需要针对特定的Modal进行调整,可以使用ID选择器,例如:`#myModal-help {top: 300px;}`。这里的`#myModal-...

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

    总结来说,实现Bootstrap模态框居中显示,关键在于通过JavaScript动态计算并设置`.modal-dialog`的`margin-top`属性,同时关注可能影响布局的滚动条宽度。这个过程涉及到对Bootstrap模态组件的深入理解和对CSS、...

    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;}

    解决select2在bootstrap modal中不能正常使用的问题

    在Bootstrap中,模态框(Modal)组件是一个常见的功能,它能够创建一个居中的对话框,用于显示额外的内容信息或要求用户进行交互,而不离开当前页面。 当我们将select2插件应用于Bootstrap模态框中时,可能会遇到...

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

    这个例子展示了如何通过修改Bootstrap源码实现模态框的垂直居中。虽然直接修改库文件并不是最佳实践,但在无法找到其他合适方法或者对库有深入理解的情况下,这种方法可以提供一个有效的解决方案。同时,要注意对...

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

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

    bootstrap总结与例子

    5. **下拉菜单** (`dropdown`): Bootstrap的下拉菜单可以通过 `.dropdown`、`.dropdown-menu` 和 `.dropdown-toggle` 类实现,可用于导航栏或按钮组。 6. **按钮组** (`button group`): `.btn-group` 类可以将多个...

    在手机上改进Bootstrap全屏模式的简单方法

    在小屏幕上,模态框默认会占据整个屏幕高度,通过设置`.modal-dialog`的`modal-dialog-centered`类实现居中对齐。为了在手机上实现全屏,我们需要针对这个结构进行调整。 一、CSS修改 1. 自定义模态框尺寸:...

    视频案例-1.初识Bootstrap_美联英语_视频案例-1.初识Bootstrap_

    10. **JavaScript插件**:除了CSS,Bootstrap还包含了一些JavaScript插件,如轮播(Carousel)、模态框(Modal)、下拉菜单(Dropdown)等,它们通过jQuery库驱动,提供更丰富的交互体验。 在美联英语的这个视频...

    Bootstrap上课代码.zip

    6. **栅格系统深入**:Bootstrap的栅格系统不仅限于基本的12列布局,还可以通过嵌套栅格、偏移(offsets)、排序(ordering)和自适应列(responsive breakpoints)等功能,实现更复杂的页面布局设计。 7. **无障碍...

    Bootstrap Modal遮罩弹出层代码分享

    在提供的代码中,我们看到的并不是Bootstrap原生的Modal实现,而是一个简单的模拟版本。这段代码包括一个自定义的弹出层(`.theme-popover`)和一个遮罩层(`.theme-popover-mask`),它们都通过CSS控制样式和行为。...

Global site tag (gtag.js) - Google Analytics