html 弹出div移动居中（好用版)

最新推荐文章于 2021-06-22 01:14:39 发布
最新推荐文章于 2021-06-22 01:14:39 发布
阅读量1.4k 收藏
点赞数
分类专栏： html JS 文章标签： JavaScript html 移动 css div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jj88888/article/details/19012125
版权
JS 同时被 2 个专栏收录
20 篇文章 0 订阅
订阅专栏
html
9 篇文章 0 订阅
订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/*弹出层的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: bold;
z-index:99;
width: 300px;
height: 120px;
left:50%;/*FF IE7*/
top: 50%;/*FF IE7*/

margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/

margin-top:0px;

position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/

_top:       expression(eval(document.compatMode &&
            document.compatMode=='CSS1Compat') ?
            documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
            document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

}


.bg {
background-color: #ccc;
width: 100%;
height: 100%;
left:0;
top:0;/*FF IE7*/
filter:alpha(opacity=50);/*IE*/
opacity:0.5;/*FF*/
z-index:1;

position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/

_top:       expression(eval(document.compatMode &&
            document.compatMode=='CSS1Compat') ?
            documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
            document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

}
/*The END*/

</style>
<script type="text/javascript">
function showDiv(){
document.getElementById('popDiv').style.display='block';
document.getElementById('bg').style.display='block';
}

function closeDiv(){
document.getElementById('popDiv').style.display='none';
document.getElementById('bg').style.display='none';
}

</script>
</head>

<body>

<div id="popDiv" class="mydiv" style="display:none;">标题<br/>你懂得<br/>
<a href="javascript:closeDiv()">关闭窗口</a></div>
<div id="bg" class="bg" style="display:none;"></div>


<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div style="padding-top: 20px;">
<input type="Submit" name="" value="显示层" οnclick="javascript:showDiv()" />
</div>
</body>
</html>

 

附加一个好看的样式

<html>
 <head><title></title>

<style>
.mesWindowTop {
    font-size: 12px;
    font-weight: bold;
    text-align: left;
}
.mesWindowContent {
    font-size: 12px;
}
.mesWindow {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #666666;
}
</style>
</head>
<body>
<div id="mesWindow" class="mesWindow" style="top: 180px; position: absolute; width: 600px; margin-left: -300px; left: 50%; z-index: 9999;"><div class="mesWindowTop"><table width="100%" height="100%"><tbody><tr><td>窗口标题</td><td style="width:1px;"><input type="button" value="关闭" class="close" title="关闭窗口" οnclick="closeWindow();"></td></tr></tbody></table></div><div id="mesWindowContent" class="mesWindowContent"><div style="padding:20px 0 20px 0;text-align:center">消息正文</div></div><div class="mesWindowBottom"></div></div>
</body>
</html>

 

孙行者悟空
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html如何设置弹框居中,jquery 弹出框 当前页面 居中（有滚动条）
weixin_39997253的博客
06-07 1103
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)原理：获取当前屏幕(窗体)的宽度和高度，因为不同浏览器的窗体大小是不一样的。有了这个，可以计算出来垂直居中的坐标。但是滑动了滚动条怎么依然垂直居中呢？这个时候就要获取当前窗体距离页面顶部的高度，加到刚刚的y轴坐标即可。$(document)是获取整个网页的，$(window)是获取当前窗体的，这个要搞清楚。最后把获取...
html 弹出div实现移动居中非常好用
09-28
本文为大家介绍了html 弹出div并移动居中，详细的实现代码如下，感兴趣的朋友不要错过
弹出层居中
wenwennihao的博客
10-11 156
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;    &lt;title&gt;&lt;/title&gt;    &lt;script type="text/javascript"&gt;        var x0 = 0, y0 = 0, x1 = 0, y1 = 0;        var moveab
html如何让弹窗居中,CSS弹窗居中的实现方法
weixin_31026805的博客
06-22 2243
下面为大家带来一篇弹窗居中的简单实现方法。内容挺不错的，现在就分享给大家，也给大家做个参考。最近做页面的时候经常会遇到弹出框居中的问题，请教了一下身边的大牛，终于弄出来了，实现的原理：1,给外围盒子定义一个伪类:before2,外围盒子定义fixed属性3,定义内容盒子。定义外围盒子：outbox{position:fixed;top:0;rightright:0;bottombottom:0;l...
让弹出层始终显示在屏幕正中间
热门推荐
皮哥不皮
03-29 4万+
一、block元素相对于父级居中：给该元素设置宽高(如果被内部元素撑开，也可不写)；然后设置样式margin:0 auto;二、inline元素相对于父级居中：给父级元素设置样式：text-align:center;三、弹层相对于浏览器窗口（或屏幕）居中：可将弹层对应的dom作为body第一层子元素，然后给弹层设置样式
弹出框--用css实现div在页面居中（水平垂直居中效果）
qq_26780317的博客
10-10 2万+
前言：在写页面的时候，经常会用到弹出框效果，一般使用插件进行处理，但是有时会出现冲突问题，下文将记录用CSS实现弹出框效果，超级简单，在此记录一下。 一、div宽高固定，使用css实现居中效果 ①当div的宽高固定时，父元素shadow通过absolute定位以后，通过top：50%，left：50%移动到屏幕中央，子元素shadow-bg也absolute定位，通过top,lef...
自制JQuery弹出层插件 PopupDiv-v1.0
02-27
JQuery弹出层插件 PopupDiv-v1.0 通用自定义弹出层插件 by maxcoold 2009-2-29 bug 提交至：[email protected] --------------------------------------------- 功能说明： 本插件基于jquery 1.31下编写，请尽量在...
新Div拖动调整大小实例
12-12
选中复选框（可移动、可调整大小）后，打开的DIV具有移动/调整大小的功能(此时移动/调整大小快捷键可使用); 反之，不可移动/调整大小(此时移动/调整大小快捷键无效) 单选框默认居中打开选中，无论有无保存DIV位置和...
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
4.jQuery超炫淡入淡出效果DIV渐变居中弹出框插件下载 5.jquery黑色+蓝色风格DIV提示框示例 6.一款jQuery+DIV居中淡入淡出信息提示框示例 7.一款jQuery可拖动提示窗插件(对话框Dialog插件) 8.一款基于jQuery...
html 弹出div 居中 可移动
想飞的鱼
06-16 4049
.show,.hide{ position:absolute; width:200px; height:200px; border:5px solid #ccc; background-color:red; font-size:14px; font-weight:bold; padding:5px; text-align:center; color:#a24; } .hide
mvc5jquery弹出层居中并显示遮罩
12-12
此项目是在MVC5的框架里自己用Jquery写的一个弹出层居中，并显示半透明的遮罩，点击遮罩任意地方就隐藏弹出层
弹出框页面居中显示的两种方法
chueia的博客
03-31 2万+
第一种 position:fixed; top:0; right:0; left:0; bottom:0; margin:auto; 这种方法在元素的宽高不固定时会全屏拉伸元素，在高度不固定靠子元素撑开自适应的情况下不适用。但是在宽高固定的情况下可以用，没有兼容性问题。 第二种 position:fixed; top:50%; left:50%; transform:transl
纯 CSS 让弹出层居中显示
qq_19306197的博客
10-20 1138
html,body,#mask{ height: 100%; margin: 0; } #mask{ width: 100%; background: black; opacity: 0.3; position: absolute; } #confirm{ width: 300px; height: 200px
html实现弹框，并伴随遮罩层，且弹框居中
www.wangpeng.cn
01-11 4016
https://www.cnblogs.com/qianxinxu/p/5488729.html
css超简单实现div页面居中【适合做弹出框】
ai09855的博客
08-15 544
1.前言 现在项目中用到弹出框的话大部分都是直接用控件的。不过有控件虽方便，但有时候会有冲突的地方。我上次用layui的弹出框控件，然后也用到了百度的编辑器uEditor，然后一切都好好的，结果编辑赋值不成功。我也不知道什么问题。如果有知道原因的大神，求赐教！ 所以说一旦有不兼容的弹出框，就自己画了。画多了，就习惯了。今天就分享一个方法【但是这个方法的原理我竟然琢磨不透！】 2.详...
弹出一个绝对居中的div
qq_38026437的博客
01-02 1469
每次做弹窗都伤脑筋，终于发现了一个大同小异的模板css样式差不多就是这样，至于margin-left和margin-top的px就是div的width和height/2了这就是绝对居中的样式，z-index自己设置#div1 { position:absolute; top: 50%; left: 50%; margin-left:-250px; margin-top:-150px; width:
htmldiv盒子居中
最新发布
12-22
以下是两种将HTML div盒子居中的方法： 1. 使用相对定位和transform属性： ```html .bigbox { width: 500px; height: 500px; background-color: pink; margin: 0 auto; position: relative; } .box { width...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值