Bootstrap Modal框居中显示的实现代码

在前端开发中，Modal框是一种常用的UI组件，用于展示重要信息或者弹出提示框。但是，使用Bootstrap的Modal框时，我们会发现默认情况下并不支持垂直居中显示。本文将介绍如何使用CSS和JavaScript代码实现Bootstrap Modal框的垂直居中显示。

实现思路

在实现Modal框垂直居中时，我们需要考虑以下几点：

Modal框的高度可能不同，所以需要动态计算Modal框的高度。
Modal框需要垂直居中显示，所以需要调整Modal框的位置。
当浏览器窗口大小改变时，需要重新计算Modal框的位置和大小。

为了实现这些功能，我们将使用以下技术：

CSS Flexbox：用于垂直居中显示Modal框。
JavaScript监听事件：用于当浏览器窗口大小改变时重新计算Modal框的位置和大小。

代码实现

HTML结构

首先，在HTML文件中创建一个Button按钮，用于触发Modal框的显示。

------- ------------- ---------- ------------ ------------------- -------------------------------------

然后，在HTML文件中创建Modal框的结构。

---- ----- ---
---- ------------ ----- ------------ ------------- ------------- ------------------------------ -------------------
  ---- ------------------- ---------------------- ----------------
    ---- ----------------------
      ---- ---------------------
        --- ------------------- ------------------------------
        ------- ------------- ------------- -------------------- -------------------
          ----- ---------------------------------
        ---------
      ------
      ---- -------------------
        -------
      ------
      ---- ---------------------
        ------- ------------- ---------- -------------- --------------------------------
        ------- ------------- ---------- --------------------------
      ------
    ------
  ------
------

在Modal框的HTML结构中，我们使用了modal-dialog-centered类，并将role属性设置为document，以实现Modal框的垂直居中显示。

CSS样式

接下来，我们需要添加一些CSS样式，以使Modal框垂直居中显示。

------ -
  ----------- -------
-

------------- -
  -------- -------------
  ------- -----
  --------------- -------
  -------- ---
-

------------- -
  -------- -------------
  ----------- -----
  --------------- -------
-

以上代码中，我们使用了Flexbox布局技术，并通过添加text-align: center;将Modal框水平居中。然后，我们使用display: inline-block;将Modal框转换为内联块级元素，并通过添加vertical-align: middle;将Modal框垂直居中。

JavaScript代码

最后，我们需要使用JavaScript代码来监听浏览器窗口大小变化事件，并在Modal框位置发生变化时重新计算Modal框的位置和大小。

--------------------------- -
  -- ------------------------ - -- -
    --- ----- - -------------- ----------------
    -----------
      ------------- ----------- ------------------- - --------------- - -- - ----
    ---
  -
---

以上代码中，我们使用了jQuery库，并使用$(window).resize()函数来监听窗口大小变化事件。然后，我们检查是否有Modal框正在显示，并获取Modal框的高度。最后，我们使用"margin-top"样式属性将Modal框垂直居中。

示例

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/2055

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