开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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，并在实际项目中根据需要进行调整和扩展。

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

有帮助

没帮助

相关·内容

用js实现一个div弹出图层

用js实现一个弹出图层，具体效果：点击按钮后弹出图层，图层处于页面中间、带有阴影的圆角边框、图层中有input、提交按钮、关闭按钮、标题，弹出后背景页面不可点击、背景变灰。...所有代码不分开、放在一个html中显示。以下是一个简单的JavaScript代码示例： div class="overlay" id="overlay"> div class="popup"> 弹出图层 <input type="...overlay.style.display = "none"; document.body.style.overflow = "auto"; } 该代码使用了CSS样式，包含一个按钮和一个弹出图层...如果想隐藏JS功能逻辑，可用JShaman对JS代码进行混淆加密，加密后的代码是密文状态，不可读、不可分析。

7.4K5 0

DIV+JS+CSS实现点击弹出图片效果

前几天扒了vue vlog的官网，想给添加一个像博客一样的点击微信图标弹出公众号二维码。...的相对层，数字大的在上层 */ overflow: auto; } Select Code Copy js代码 ...class="top_contact_us"> div class="top_telphone">div> div class="top_weixin">微信公众号div> div class="top_qq">官方QQ群div> div> div id="light_qq" class="white_content

26.2K3 0

点击文字或按钮弹出一个DIV窗口（DIV悬浮窗口）

因为最近有人问小轻建站问题，想知道DIV弹窗的做法，给大家测试了下，效果大家可以再做修改。 ? ▲ 效果图以下是弹出窗口代码：点击文字弹出一个...DIV层窗口代码 .black_overlay{ display: none; position...:1002; overflow: auto; } 示例弹出层...> div id="fade" class="black_overlay">div> 如果你也有什么问题，欢迎给【小轻论坛】留言，我们会竭力帮大家解决

14.7K3 0

10.14 如何实现一个居中弹出的窗口？

如何实现一个居中弹出的窗口？效果代码如何实现一个居中弹出的窗口？... div id="panel1" class="panel-mask"> div class="panel"> ...$("#panel1").css("display", "none") } div...class="close-btn" onclick="closePanel()">×div> 标题文本描述 div> div> 弹出

1.6K1 0

react给一个div行内加背景图片并实现cover覆盖模式居中显示

div style={{ display: 'inline-block', width:...background: `url("${thumb[0]}") center center / cover no-repeat`, }}> div...如果分开写background其他设置，会出现一个问题，就是第一次加载图片是cover覆盖的，no-repeat，center center，但是打开其他页面再回来这些样式就都不生效了，只剩一个背景图片了

3.8K2 0

HTML可拖动自定义弹出层

最近在进行web项目开发过程中，遇到了一个需求，就是需要弹出层可以用鼠标拖动。之前经常做的是弹出一个弹出层来提示用户信息或者是弹出一个弹出层进行登录，缺点是不能根据用户的视觉习惯定位他。...div> div> 页面部分为有一个login按钮，点击按钮弹出login层 CSS部分代码 #login { width:350px; height:250px; border:1px...样式的定义，因为需要居中展示我们使用绝对定位position:absolute;其次因为是弹出层，div必须在最外围，所以通常把z-index设置的非常大，这里我们设置为z-index:9999;还有一点是关于...JS部分代码 $(document).ready(function(){ jQuery.fn.extend({ center:function(width,height){ return...show().center(350,250);//展现登陆框 }); $(".close").click(function(){ $("#login").hide() }); 这段代码里增加了一个使弹出层居中的代码

2.6K1 0

运行js文件，会弹出一个python解释器的界面，怎么解决呢？

一、前言前几天在Python白银交流群【菜】问了一个Python环境配置的问题，一起来看看吧。...问题如下：问题：下载安装nodejs，然后在pycharm专业版里面也下载了nodejs的插件，配置好运行路径后，运行js文件，会弹出一个python解释器的界面，怎么解决呢？...二、实现过程这里【猫药师Kelly】给了一个指导：首先要进行python环境配置了，粉丝反馈配置了环境，而且之前是社区版，现在是换成了专业版。...这篇文章主要盘点了一个Python环境配置的问题，文中针对该问题，给出了具体的解析和代码实现，帮助粉丝顺利解决了问题。

1351 0

JS系列2-怎么把一个对象当做数组使用

怎么把一个对象当做数组使用？我们知道在JS中对象和数组的操作方式是不一样的，但是我们可以通过封装，给对象加一层包装器，让它可以和数组拥有同样的使用方式。...Object.keys 看一下MDN上的解释： Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。...bar', baz: 42 }; console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ] Proxy Proxy是JS...const p = new Proxy(a, handler) p.forEach((v, k) => console.log(`${k}-${v}`)) // a-1 // b-2 // c-3 我们应该把以上代码封装为模块...; // null x.lastKeyOf('c'); // 'c' JS

1.8K3 0

把一个 Node.js web 应用程序给 Docker 化

在 Node.js 中创建一个 Web 的应用程序，然后我们为那个应用构建一个 Docker 镜像；最后我们将把那个镜像作为容器运行之。...1.创建 Node.js 应用首先，创建一个新文件夹以便于容纳需要的所有文件，并且在此其中创建一个 package.json 文件，描述你应用程序以及需要的依赖： { "name": "docker_web_app...2.然后，创建一个 server.js 文件，使用 Express.js 框架定义一个 Web 应用： 'use strict'; const express = require('express')...EXPOSE 8080 CMD [ "node", "server.js" ] .dockerignore 文件在 Dockerfile 的同一个文件夹中创建一个 .dockerignore 文件，带有以下内容...开关符 -p 在容器中把一个公共端口导向到私有的端口，请用以下命令运行你之前构建的镜像： docker run -p 49160:8080 -d /node-web-app

1K2 0

使用easydrag实现可拖动的DIV弹出框

easydrag极大的方法我们实现div弹框这个功能，使我爱不释手！在没遇到easydrag插件之前，想实现一个弹出框并不是一件轻而易举的事情！...DOCTYPE HTML> easydrag实现可拖动的DIV弹出框 /* 重置浏览器默认样式 */ body,h1...-- easydrag.js没有找到在线的cdn，大家可以自行下载 --> js/easydrag.js">...script language="javascript"> $(function(){ //btn绑定click事件 $('.btn').click(function(){ //设置弹出框居中...打开弹出框 div id="popbox" class="box"> div class="head" id="handler"><b class="close

2.3K6 0

新手学JavaScript（三）----超酷消息警告框插件（SweetAlert）

SweetAlert 能在页面自动居中，支持桌面环境，移动端和平板，并且高度自定义。接下来看看它的具体使用！...确认输入：点击这里 div> JavaScript ---- 定义js事件： $(function()..., "弹出了一个操作成功的提示框", "success"); }); $(".demo_3 button").click(function..., "弹出了一个错误提示框", "error"); }); $(".demo_4 button").click(function() {...- imageUrl 定义弹出框中的图片地址。 -

6.5K2 0

前端|利用模态框（Modal）实现弹窗效果

二、模态框（Modal）简单介绍模态框在bootstrap中是一个插件，所以也可以单独引用插件，但是这就需要引用modal.js。但是在本文中还是介绍用bootstrap的写法。...class="modal-dialog"是用来设置弹出框居中的。...默认情况下弹出框的宽度比较小，不适合要求，bootstrap中提供了modal-dialog的三个选项，大、默认、小（modal-lg最大，默认中，modal-sm最小）。...div>div> | |:----| [9xa5wxjj5a.png] 图3.1 效果图（3）设置js。...当我们把“$("#mymodal").modal("toggle")”代码改成“$("#mymodal").modal("hide")”然后去点击按钮，会发现怎么点都打不开，这就是因为设定了点击触发关闭模态窗

5.8K3 0

让div等块级元素水平以及垂直居中的解决办法

一、背景　　我们在设计页面的时候，经常要把div等块级元素居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让div等块级元素居中。...二、解决办法 1.CSS让div等块级元素水平居中　原理：让一个div等块级元素水平居中，直接用CSS就可以做到。...如果当页面div等块级元素宽度和高度是动态的，比方说需要弹出一个div等块级元素元素层并且要居中显示，div等块级元素的内容是动态的，所以宽度和高度也是动态的，这时需要用jQuery可以解决居中。 ...等块级元素的具体宽度和高度大小，直接用jQuery就可以实现水平和垂直居中，而且兼容各浏览器，这个方法在很多的弹出层效果中应用。 ...tips:在页面的外面建一个table，设置高度为100%，然后设置td垂直居中显示，把页面套进去就OK拉！

1.8K2 0

【Html.js——小游戏】芝麻开门（蓝桥杯真题-2322）【合集】

点击“点击弹出对话框，输入咒语”按钮会调用 mPrompt 函数，mPrompt 调用后页面显示对话框。mPrompt 函数必须返回一个 promise 对象。...">点击弹出对话框，输入咒语 div> div id="door"> div class="doors">div> div class...页面主体结构：在标签内： div class="wrapper"> 包裹一个按钮，.wrapper 类用于设置按钮的布局，使其在页面中水平居中显示。...点击弹出对话框，输入咒语定义了一个按钮，按钮上显示 “点击弹出对话框，输入咒语”，btn 和 btn - large...首先，通过模板字符串创建弹窗的 HTML 结构，并将其插入到一个新创建的 div 元素中。然后，将这个 div 元素添加到 body 中显示弹窗。

420 0

vue组件，可以通过npm引用的组件

本文章通过实现一个vue-dialog的弹出层组件，然后附加说明如果发布此包到npm，且能被其他项目使用。功能说明多层弹出时，只有一个背景层。弹出层嵌入内部组件。...多层弹出时，只有一个背景层利用两个组件实现，一个背景层组件（只提供一个背景层，组件名：background.vue），一个弹出层内容管理组件（实现多个内容层的管理，组件名：master.vue)。...style：此方法用于生成内部组件居中的css代码。 js代码: import hDialogBack from '....$refs找到弹出层管理组件使用调用其open方法，并接受一个promise类型的返回值使用promise即可。.../dist', filename: '[name].js', library: 'vue-hdialog', libraryTarget: 'commonjs2' } 在npmjs上注册一个账号利用npm

1.3K5 0

CSS常用实例，web前端开发者不知道这些就太low了

more content div> div> div> other element div> 二、盒子水平垂直居中水平垂直居中的场景：弹出dialog需要居中显示...一般情况都是用JS来计算位置，这里我介绍一下CSS来实现水平垂直居中的实现 1、盒子宽高固定 <!...-- 试验二：在上面代码基础上, 把html,body的height设置为100%, 也没有实现我想要的效果 --> html, body{ height: 100%...-- 到现在你应该思考一个问题，width, height的百分比，是以谁为标准设置的？它们都是以父元素的宽高为标准，然后取对应的百分比值。...我们要想实现等比缩放，只能有一个标准，比如都是宽度为标准的话，是不是就好办了？

1.8K12 0

怎样把网站js文件合并成一个?几种方法可以实现

我们在建网站时经常会用js特效代码以使页面更美观，比如js幻灯片代码、js下拉菜单等，但是网页特效一多，如果js文件没有合并的话会降低网站的性能，这时我们就要考虑合并js文件了，ytkah总结了以下几种方法可以实现...：　　1.把不输出（没有document.write）的公共函数合到一起，如果单纯地把两个js文件内容copy到一起可能会出错　　2.新建一个import.js文件，把所有的js文件全部写进去 with...text/javascript" language="javascript" src="/3.js">'); } 　　但是这种方法虽然代码精简了，而实际上却也要加载这些js文件，所以不算适用...3.采用异步加载（页面加载后）不太重要的JS文档　　4.将JS文档放到多个网站上，可实现同步加载多个JS。...如a.com/1.js、 b.com/2.js ，但这种如果其中一个网站出问题，那么页面加载将会很缓慢。

3.8K3 0

layui弹出层html,layer弹出层「建议收藏」

这种弹出层都是绝对定位的所以没办法用margin：auto 0神马的居中。解决方案主要两种： 1.修改在浏览器里面调试模式。...layer弹出层表单的数据使用layer.js做弹出层时，在弹出层里直接提交form表单，返回的画面仍然停留在弹出层里。...我们想在弹出层里提交form表单后关闭弹出层，并跳转到另一个画面。引用layer.js后弹窗为什么会在页面最底部出现这个要看layer中content的内容了 /。...如何设置jquery layer弹窗弹层位置 layer插件如何弹出自定义div？用了webuploader，想要点击按钮弹出文件上传窗口。...即id=wrapper下的DIV 刚好今天我也遇到这个问题，摸索了几个小时，搞定了，关键语法如下： layer.open({ type: 1, content: (‘#id’) //这里content是一个

19.1K3 0

写一个chrome插件到底有多难？

图片其次是大眼的位置，原本是处于网页居中的位置，在实际浏览中会遮挡住核心的浏览区域，因此我们考虑把大眼移到上方居中。...后面我们把他改成chrome插件。...可以看到这边把echarts.min.js也一并注入了。...当情绪值>80时，会将大眼设置成angry的状态，并且会弹出一些安慰的话语。同样当情绪值恢复到60以下时，会将大眼设置回normal的状态。当关闭浏览器时，会弹出一个总结的通知。...不多整两把？"

5713 0

正确使用Layui弹出层

正确使用Layui弹出层开发工具与关键技术：MVC 作者：盘洪源撰写时间：2019年6月16日星期天在一些需要用到弹出层的页面，这个时候就可以用到layui.layer弹出层的一个使用，使用方法也很简单...这种错误的可能原因就是你的layui的JS插件引错了 <script src="~/Plugins/layui/dist/layui.js"> <script src="~/Plugins...layui.js"> 我这里这个是通过点击按钮弹出弹出层的例子，弹出层里面的内容就需要自已在页面写好了，和平时写的html代码没什么区别，只要在最外层的div加上一个ID备用，然后设置...下面这个是一个简单的layui弹出层写法，里面的属性随各人需求，属性的用法这个就自已去layui官网看比较详细点，我这说也说不完。...我这里就是点击按钮弹出弹出层，然后上下左右居中效果，content里面放的就是你的html弹出层的ID。

2.7K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭