弹出一个绝对居中的div

╰半夏微凉° 2022-06-02 03:41 197阅读 0赞

每次做弹窗都伤脑筋，终于发现了一个大同小异的模板

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:500px;  
 height:300px;  
 z-index:1;  
 border:solid \#7A7A7A 4px;   
\}

网页就是这个样子，也是从网上copy的，随手修改

<span style="cursor:pointer" id="span1">点我弹出div</span>  
  
  
<div id="div1">  
   <div align="right" style="background-color:\#CDCDCD;">  
   <span id="span2" style="cursor:pointer">关闭</span>  
   </div>  
   <p><p>  
<form>  
  
姓名:<input  type="text"/><p />  
  
年龄:<input  type="text"/><p />  
  
<input  type="submit" value="submit"/><br />  
  
</form>  
  
</div>

jquery或者js 随便写大概就是这样

$(function()\{  
           $("\#div1").hide(); //先让div隐藏  
            $("\#span1").click(function()\{  
                  $("\#div1").fadeIn("slow");//淡入淡出效果 显示div  
            \});  
            $("\#span2").click(function()\{  
                     $("\#div1").fadeOut("slow");//淡入淡出效果 隐藏div  
            \})  
        \});

以上就可以弹出绝对中div，希望可以帮到大家，当然有了居中 就可以想去哪里就去哪里![大笑][laugh.gif]

[laugh.gif]: /images/20220602/084f8ced8f0d4300a743d07a73ca4517.png

发表评论取消回复

表情：

评论列表（有 0 条评论，197人围观）

还没有评论，来说两句吧...

相关阅读

相关 php关闭弹出div,jquery,_jquery 点击下一个DIV关闭上一个DIV，jquery - phpStudy

jquery 点击下一个DIV关闭上一个DIV DIV结构是这样的：点击里的 btn 显示 content ，点击 btn 隐藏 content 问题：当前内容

╰+哭是因爲堅強的太久メ/ 2022年11月18日 13:41/ 0 赞/ 137 阅读

相关一个简单的弹出div，div里是一个表格

先看效果图： ![SouthEast][] 默认时来时，产品信息是隐藏的；点击链接时显示，再点一下隐藏，或点X隐藏。代码在jsp中写的，代码如下： <%

r囧r小猫/ 2022年08月25日 08:53/ 0 赞/ 154 阅读

相关 jsp页面div浮动弹出

1、jsp页面设置 ![Image 1][] ![Image 1][]![Center][] 2、css设置 ![Image 1][] ![Image 1

Love The Way You Lie/ 2022年07月24日 10:05/ 0 赞/ 204 阅读

相关可拖动的div弹出层

js： var mainDiv; var bgDiv; function popD(mainId, titleId, w, h) \{ mainDi

傷城~/ 2022年07月10日 07:28/ 0 赞/ 249 阅读

相关弹出一个绝对居中的div

每次做弹窗都伤脑筋，终于发现了一个大同小异的模板 css样式差不多就是这样，至于margin-left和margin-top的px就是div的width和height/2了

╰半夏微凉°/ 2022年06月02日 03:41/ 0 赞/ 198 阅读

相关如何在一个div中使其子div居中的5种方式

![70][] [demo地址-codepen][demo_-codepen] 第一种基于绝对定位，要求有固定的宽高 main{ p

川长思鸟来/ 2022年05月24日 13:18/ 0 赞/ 193 阅读

相关将一个div水平垂直居中的6种方法

方案一： div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】，兼容性：,IE7及之前版本不支持 div\{ widt

拼搏现实的明天。/ 2022年05月24日 07:08/ 0 赞/ 263 阅读

相关让盒子绝对居中的办法

让一个盒子绝对居中的方式： position：absolute； left：0； right：0； top：0； bottom：0； margin：auto；因为

电玩女神/ 2022年05月23日 08:58/ 0 赞/ 173 阅读

相关 layui弹出层显示指定的div

不多说直接上干货： 1、layui写法： layer.open({ content: $("type-con

骑猪看日落/ 2022年04月23日 12:02/ 0 赞/ 713 阅读

相关 div水平垂直居中的方法

在平时，我们经常会遇到让一个div框针对某个模板上下左右都居中(水平垂直居中)，其实针对这种情况，我们有很多种方法实现。方法一：绝对定位法，不确定当前div

本是古典何须时尚/ 2021年07月25日 12:55/ 0 赞/ 506 阅读