JS弹出层单纯的绝对定位居中

最新推荐文章于 2022-03-01 15:21:38 发布
最新推荐文章于 2022-03-01 15:21:38 发布
阅读量819 收藏
点赞数
分类专栏： JS 文章标签： js JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jj88888/article/details/10521769
版权
function doThis()
    {
   var a = document.getElementById("addYear");
   a.style.left=(document.body.clientWidth/2-a.clientWidth/2)+"px";
   a.style.top=(document.body.scrollTop+document.body.clientHeight/2-a.clientHeight/2)+"px";
    }
孙行者悟空
关注
专栏目录
JavaScript实现元素居中
2301_79330511的博客
09-21 572
本文将介绍几种使用JavaScript实现元素居中的方法，并提供相应的源代码示例。以上是几种常见的使用JavaScript实现元素居中的方法。根据实际需求和使用的布局方式，选择适合的方法即可。方法三：使用JavaScript计算和设置元素的左边距（margin-left）方法三：使用JavaScript计算和设置元素的上边距（margin-top）方法三：使用JavaScript计算和设置元素的左边距和上边距。方法二：使用CSS的position和transform属性。综合水平居中和垂直居中。
使用JavaScript实现DIV元素的居中是网页开发中常见的需求之一
最新发布
TechNovaX的博客
09-14 404
在centerDiv函数内部，我们首先获取DIV元素的引用，然后使用window对象的innerWidth属性和innerHeight属性获取窗口的宽度和高度。我们使用window对象的load事件来监听页面加载完成的事件，并在事件触发时调用centerDiv函数，以确保在页面加载完成后DIV元素已经居中显示。通过以上的代码，我们可以实现一个随时居中的DIV元素。最后，我们根据窗口的宽度、高度和DIV元素的宽度、高度计算出DIV元素的左边距和顶部边距，并将其应用到DIV元素的样式中，实现居中效果。
DIV弹出层+定位
12-24
这个例子是，div弹出层并且固定位置，弹出层的弹出方式为滑动方式。
定位弹出层
weixin_34302798的博客
02-21 122
2019独角兽企业重金招聘Python工程师标准>>> ...
JS 弹出层 定位至屏幕居中
蚂蚁的技术总结
05-21 2428
无标题文档 /*弹出层的STYLE*/ html,body {height:100%; margin:0px; font-size:12px;} .mydiv { background-color: #ff6; border: 1px solid #f90; text-align: center; line-height: 40px; font-size: 12px; font-weight:
定位居中布局+js日常
qq_40001322的博客
07-27 666
 javascript:void(0); 使按钮不可点击   position: absolute;定位 center{     position: absolute;     width: 80%;     height: 1rem;     right: 0;     left: 0;     top: 0;     bottom: 0;     margin: auto; } ...
JS弹出层单纯的绝对定位居中示例代码
10-26
在这篇关于“JS弹出层单纯的绝对定位居中示例代码”的文章中，作者详细介绍了如何通过JavaScript代码实现一个弹出层的绝对定位居中效果。以下是对文章中提到的知识点的详细说明： 1. HTML元素的定位属性：在HTML中...
html+css+js基础问答
qq_43751465的博客
08-26 5337
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
HTML+CSS基础自制笔记
Kyrie_irving_kun的博客
08-04 3564
一、HTML笔记 文章目录一、HTML笔记初识标签标签语义标题标签：段落标签：换行标签：文本格式化标签：盒子标签：图像标签和路径：超链接标签：注释标签：常用特殊字符：表格标签：表头标签：常用表格属性：表格结构标签：合并单元格：合并步骤：列表标签：无序列表（重要）有序列表（理解）自定义列表（重点）表单标签：input标签：其他属性：labal标签：select标签：textarea标签：二、CSS笔记CSS简介：声明常用属性：CSS基础选择器：1.标签选择器2.类选择器3.id选择器4.通配符选择器字体属性：
前端面经高频考点
shixue7758的博客
03-01 414
文章目录HTML1、高频1之行内元素、块级元素、行内块元素的区别2、高频2之script标签中defer和async的区别CSS1、高频1之说一下你认知的定位2、高频2之浮动3、高频3之margin合并的问题4、高频4之BFC布局5、高频5之如何进行移动端的适配6、高频5之display float 和 position之间的关系 HTML 1、高频1之行内元素、块级元素、行内块元素的区别 设置方式：display：block(块级元素)/inline(行内元素)/inline-block(行内块元素) 块
前端学习笔记
weixin_44360988的博客
10-30 1155
JS js对象是通过引用来传递的，我们创建的每个递归函数是在一个函数通过名字调用自身的情况下造成的 function factorial (num) { if (num <= 1) { return 1; } else { return num * factorial(num - 1); } } call apply bind继承 第二个参数不一样，call()第二个参数是数，apply()第二个参数是数组 模块化：公共&私有方法（闭包） 块级作用域（通常称为私有作用域）的匿名函
使用css 控制弹出框始终水平居中
du_peiduo的专栏
12-02 3664
使得弹出框的 position:fixed; 距离左侧 left:50%; 然后再知道弹出框宽度的情况下像左偏移 宽度的1/2即可 .invite-dialog { margin-left: -144px; position: fixed; left: 50%; width: 288px; min-height: 166px; background: white;
关于弹出层定位的问题
like_jack的博客
08-27 3984
弹出层写在了body内，body内还有另外两个div。本想给弹出一个绝对定位，但是发现body的实际高度比并不是全屏，因为有一个选项卡是经过点击之后显示的，body并没有包含这个被显示的选项卡，只是最初状态的值。 后来给把弹出层的绝对定位改为fixed就好了。就会覆盖全屏若是绝对定位覆盖的只是在选项卡没被显示的时候的高度了。 为啥当选项卡被显示的时候body的高度的高度为什么不会随着增高呢？
学习日记——绝对定位之弹窗固定在第一屏幕上的三种方法
qq_42660453的博客
10-28 739
第一种定位和margin结合。 .box1{ width: 100px; height: 100px; background-color: red; font-size: 40px; position: absolute; z-index: 2; top:50%; left: 50%; ..
js实现盒子水平垂直居中
qq_42349528的博客
10-03 3281
假设我们不知道盒子的宽高 方法1：绝对定位 + transform中的translate。首先对子元素进行绝对定位，父元素进行相对定位，然后将子元素的左上角通过top:50%和left:50%定位到页面中央，最后通过translate来调整子元素的中心点到页面的中心。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex布局</ti
js设置居中
热门推荐
喻志强的博客
03-23 3万+
我们在编写html页面的时候，不可避免的会遇到元素居中的问题，水平居中还好说 我们可以通过设置margin: auto;text-align: center;来实现水平居中。垂直居中的话，单个标签我们可以通过设置line-height来实现垂直居中，但是多个标签的时候就没法这么做了。 有一种方法就是通过js算出元素的left和top值来实现居中。一般都是获取父元素的宽高，再获取子元素的宽高，父元素的
弹出div 并固定到相应的位置
weixin_38316999的博客
05-22 2424
设计目标：鼠标放在查询上面，在查询的下面弹出相应的div层信息，鼠标离开查询隐藏div如果进入div依然显示div 光标离开div层就隐藏div层信息。其余的功能可以模仿此代码。第一步： 设计一个div对象放入html页面中并设置相应的属性 &lt;span id = "peizhi"&gt;查询&lt;/span&gt;&lt;div id="mydiv1" class="na"&gt;&l
JavaScript实现跨浏览器弹出层效果
JavaScript部分使用了一个名为`mask-layer.js`的外部脚本，这通常用于创建遮罩层，使得弹出层可以突出显示。文档中没有给出这个脚本的详细内容，但通常这样的脚本会包含创建遮罩、控制弹出层显示和关闭、以及处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值