首页 > 软件开发 > JQUERY >

bootstrap3模态框垂直居中的方法

来源:互联网 2023-03-17 00:47:38 115

bootstrap的模态框,默认是设置了top为0的,就是默认是显示在窗口的顶部的,如果你想让模态框垂直显示,不能直接设置,但我们可以使用js脚本来处理。

lL2办公区 - 实用经验教程分享!

lL2办公区 - 实用经验教程分享!

方法/步骤

  • 1

    这是默认情况下,模态框显示在顶部位置的。

    lL2办公区 - 实用经验教程分享!

    lL2办公区 - 实用经验教程分享!

    bootstrap3模态框垂直居中的方法lL2办公区 - 实用经验教程分享!

  • 2

    这是按钮自动触发弹出框的属性,我们需要把它去掉。

    lL2办公区 - 实用经验教程分享!

    lL2办公区 - 实用经验教程分享!

    bootstrap3模态框垂直居中的方法lL2办公区 - 实用经验教程分享!

  • 3

    模态框的其他html代码如下。

    lL2办公区 - 实用经验教程分享!

    lL2办公区 - 实用经验教程分享!

    bootstrap3模态框垂直居中的方法lL2办公区 - 实用经验教程分享!

  • 4

    为按钮添加点击事件,在事件函数里触发模态框的显示。

    lL2办公区 - 实用经验教程分享!

    lL2办公区 - 实用经验教程分享!

    bootstrap3模态框垂直居中的方法lL2办公区 - 实用经验教程分享!

  • 4本页面未经许可获取自百度经验
  • 5

    在显示模态框的逻辑前,我们需要计算一下垂直居中的位置。先得到浏览器的窗口高度,然后减去弹出框的高度,我们这里假设它为200。相减后除2就是位置了。

    lL2办公区 - 实用经验教程分享!

    lL2办公区 - 实用经验教程分享!

    bootstrap3模态框垂直居中的方法lL2办公区 - 实用经验教程分享!

  • 6

    设置模态框的top属性为计算出来的值。

    lL2办公区 - 实用经验教程分享!

    lL2办公区 - 实用经验教程分享!

    bootstrap3模态框垂直居中的方法lL2办公区 - 实用经验教程分享!

  • 7

    再次运行页面,现在模态框弹出的位置已经是垂直居中的了。

    lL2办公区 - 实用经验教程分享!

    lL2办公区 - 实用经验教程分享!

    bootstrap3模态框垂直居中的方法lL2办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!lL2办公区 - 实用经验教程分享!


    标签: CSSJQUERY

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码