js把弹出一个div居中

要在 JavaScript 中实现一个弹出的 div 居中显示，可以结合 CSS 和 JavaScript 来完成。以下是一个完整的示例：

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centered Div</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button onclick="showCenteredDiv()">Show Centered Div</button>
    <div id="centeredDiv" class="modal">
        <p>This is a centered div!</p>
        <button onclick="hideCenteredDiv()">Close</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS 样式（styles.css）

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    max-width: 600px; /* Optional: set a maximum width */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    border-radius: 5px;
}

JavaScript 代码（script.js）

function showCenteredDiv() {
    document.getElementById("centeredDiv").style.display = "block";
}

function hideCenteredDiv() {
    document.getElementById("centeredDiv").style.display = "none";
}

解释

HTML 结构：一个按钮用于触发显示弹出 div，另一个按钮用于关闭弹出 div。
CSS 样式：
- .modal 类用于创建一个覆盖整个页面的半透明背景。
- .modal-content 类用于定义弹出 div 的样式，包括背景颜色、边框、阴影等。
- margin: 15% auto; 用于将弹出 div 垂直居中，并水平居中。

JavaScript 代码：
- showCenteredDiv 函数用于显示弹出 div。
- hideCenteredDiv 函数用于隐藏弹出 div。

应用场景

这种居中弹出 div 的技术常用于：

模态对话框（Modal Dialogs）
提示信息（Toasts）
确认对话框（Confirmation Dialogs）

可能遇到的问题及解决方法

弹出 div 不居中：
- 确保 .modal-content 类的 margin 属性设置为 15% auto;。
- 检查是否有其他 CSS 样式影响了布局。

弹出 div 无法显示：
- 确保 JavaScript 函数正确绑定到按钮的 onclick 事件。
- 检查是否有 JavaScript 错误阻止了代码的执行。

通过以上步骤，你可以实现一个简单且居中的弹出 div，并在实际项目中根据需要进行调整和扩展。

页面内容是否对你有帮助？

有帮助

没帮助

创建带有链接的Facebook对话框弹出窗口

、、、、

我正在尝试使用上周发布的新改进创建一个Facebook Dialog。我想要的是能够有一个链接，这样当它被点击时，弹出窗口就会生成，或者让它显示在页面上。我试着把它放在DIV中，然后用JQuery显示，但它不会在页面上居中。我已经得到了发布到用户墙的代码。只是不知道如何格式化JS代码和/或为弹出窗口创建链接。提前感谢！

浏览 1提问于2010-12-14得票数 1

3回答

在元素后面有堆叠错误的元素上的jQuery .click？

、、、

我有一个'lightbox‘类似的函数，它简单地显示了2个div，如下所示：绿色(一旦正常工作就不会被着色)是单击关闭登录框的区域。

浏览 0提问于2012-08-20得票数 1

回答已采纳

2回答

如何将div保持在视区的中心

、、、

我正在为我的一个项目创建一个反馈系统。基本上，发生的是一个div通过ajax调用到页面中，它应该覆盖下面的内容。我让这部分起作用了。我想要做的是将div锁定到视区的中间。如果我向下滚动到一个较长页面的底部，并调用我的反馈窗口，它仍将接近顶部。

浏览 1提问于2012-12-05得票数 0

回答已采纳

3回答

JQuery注册表格点击弹出

、、、、

我试图使一个Javascript JQuery注册表格弹出链接点击.所以我有个按钮：我正试图把它弹出一个简单的html注册表格，我可以把它存储在一个隐藏的注册DIV中。示例： <div name="reg" style="visibility:

浏览 2提问于2016-10-15得票数 1

回答已采纳

1回答

jQuery mobile中方向改变时的覆盖位置

、、

我有一个覆盖，这是弹出的一个按钮在标题。覆盖显示在按钮附近。<div data-role="header" data-position="fixed" data-theme="a" data-tap-toggle="false"> <h1>Photos</h1>photomenu" data-icon="gear" data-iconpos="notext&q

浏览 1提问于2013-02-12得票数 0

2回答

用户滚动后的jQuery手机弹出窗口位置

、

如果用户在稍微向下滚动后点击链接，jQuery手机弹出框是否可以显示在div上并居中到窗口？我使用silentScroll方法将页面滚动回目标元素的顶部。弹出框应该居中到窗口，但如果用户向下滚动了一点，我们希望向上滚动回小提琴中的绿色div，然后在窗口中心显示弹出框。如果您向下滚动，使“链接2”位于窗口的最顶部，然后单击它，弹出框将出现在绿色div的下方，而不是绿色<em

浏览 0提问于2013-07-11得票数 0

回答已采纳

4回答

如何垂直对齐不同高度的div？

、、

我在有一个弹出窗口，我需要弹出的div垂直居中。还会有更多，因为它是Tumblr，博客有不同的帖子，所以div的高度会有所不同。我需要它在中间垂直居中，以便内容向上和向下扩展。

浏览 0提问于2011-01-17得票数 1

5回答

缩放后的绝对位置

、、、

我用class="myDiv"做了div。我需要做这个逻辑:在鼠标悬停时，我想在div的中间显示一个弹出窗口。}.popupWindow{ width:313px; display:none;这将在鼠标悬停时将弹出窗口定位在div的中间。弹出窗口不再显示在myDiv的中间。编辑：更多的信息，如果它是创建的，我缩放它，它是很好

浏览 0提问于2013-05-01得票数 12

回答已采纳

6回答

jQuery移动弹出窗口未显示在中心位置

我正在使用jQuery手机，并试图在页面加载时显示jQuery弹出窗口。但是当页面加载时，弹出窗口不会出现在中间，相反，弹出窗口的左上角会出现在中心。但是，一旦浏览器窗口大小发生变化，弹出窗口就会自动移到中心位置(即使我按下了F12 for developers tool)。但是第一次弹出框的左上角出现在中间。

浏览 0提问于2012-12-06得票数 10

3回答

如何在屏幕中央打开弹出窗口？

、

我使用以下代码在关闭另一个弹出窗口后打开一个弹出窗口： $('#overlay_form_deleteGenFile').fadeOutwindow).height() - popup.outerHeight()) / 2 : 20), }); 它不能在屏幕中间打开弹出窗口我只想与滚动页面无关，只需在屏幕中央打开<e

浏览 49提问于2019-10-29得票数 0

3回答

与页面一起滚动的jQuery lightbox插件

、、、

我不知道第二种类型叫什么(或者是否有一个术语来描述这种行为)。哪个jQuery插件允许lightboxes与页面一起滚动？

浏览 1提问于2010-01-21得票数 3

回答已采纳

1回答

如何定位已经有浮点数的div？

、

我有一组div，我已经设置为float:left，我希望它们都彼此一致，但仍然居中，这是我目前拥有的：<div style="display: inline; text-align:center;"> test <div id="generalmenu">

浏览 0提问于2012-10-14得票数 1

回答已采纳

4回答

很好的CSS闪光(也就是Rails中的信息信息，OSX中的咆哮)

、、、、

我要它：我所看到的大多数CSS都没有这样做--例如，大

浏览 3提问于2009-05-07得票数 13

1回答

使<div>居中对齐屏幕-最兼容的版本

、、、

在屏幕上居中(水平和垂直)对齐<div>最兼容的方法是什么？我目前正在使用CSS：{ left:50%;有什么想法吗？也许使用JS/jQuery是有效的？

浏览 0提问于2011-10-06得票数 3

回答已采纳

1回答

使用jquery居中悬停气泡

当用户悬停在红色框上时，我喜欢用jquery显示弹出气泡。问题是我仅仅通过实验就把代码组合在一起了……这没有任何意义！).load(function() { divW = $(this).next("div").width()/4; $(this).next("div").css({marginLeft: -divW }).animate(

浏览 4提问于2012-06-20得票数 1

回答已采纳

5回答

CSS垂直和水平居中分隔

、

我有一个包含ASP.NET表单的弹出窗口，单击“请求信息”链接，表单就会出现。div的位置是绝对的，整个页面宽度为960px，页边距设置为0 auto。

浏览 2提问于2011-11-28得票数 5

回答已采纳

1回答

阴影箱剥皮及上浆

、

我如何皮肤阴影盒，并确保弹出大小是固定的大小？然而，我不知道markup.js应该是什么样子。)；现在我找不到一个markup.js应该是什么样子的例子。(我试图将sb-nav div放在内容之前，sb-title div放在内容下面，并添加一些新参数)。i使用这种方法修正了弹出窗口的大小：handleOversize resi

浏览 4提问于2010-03-25得票数 2

1回答