弹出框文档居中

 1 div{
 2             background:#f00;
 3             width:100px;
 4             height:100px;
 5             position:fixed;
 6             overflow:hidden;
 7             top:50%;
 8             left:50%;
 9             margin:-50px 0 0 -50px;//利用margin负值时特性,就不需要什么js了
10         }

margin负值可以做出很多特效,如果哪位大神有更好的例子,求分享学习

时间: 2024-10-08 03:17:05

弹出框文档居中的相关文章

弹出框始终保持居中(包括有滚动条和窗体缩放时)

之前写的代码,都是在当前窗口位于居中,可是一旦窗口缩小或者放大都不是位于居中的位置了,但是一直想写的一个类似于alert弹出窗口的效果. 原理很简单: 获取当前屏幕(窗体)的宽度和高度,因为不同浏览器的窗体大小是不一样的.有了这个,可以计算出来横向居中和垂直居中的坐标.但是滑动了滚动条怎么依然横向居中和垂直居中呢?这个时候就要获取当前窗体距离页面顶部的高度和横向滚动条移动的宽度,加到刚刚的y轴坐标即可. $(document)是获取整个网页的,$(window)是获取当前窗体的,这个要搞清楚.

解决模拟弹出框情况下文档滚动的问题

用div元素来模拟弹出框很普遍,它可以自行定制各式各样的弹出框.弹出框一般用的是fixed绝对定位,也就是相对于浏览器窗口定位. 在文档高度大于窗口高度的情况下,弹出框会存在一个问题.当弹出框在显示的时候,滚动鼠标(PC端)或滑动页面(移动端)会导致文档滚动.还有在弹出框的高度也大于窗口高度时,滚动鼠标或滑动页面会先滚动弹出框,直到滚动条到头或到尾时,继续滚动弹出框仍然会导致文档的滚动. 这个问题会导致用户在隐藏弹出框返回时,页面显示不是显示弹出框前的位置.解决办法是给这个文档动态设置overf

弹出框背景色透明滚动条滚动仍然居中

弹出框div: <div class="webbox" style=""> <div class="webboxtop"> <span class="tstitle">发货网点(收货网点)</span> <a href="#" class="closebox"></a> </div> <div cl

Bootstrap:弹出框和提示框效果以及代码展示

(转自Bootstrap:弹出框和提示框效果以及代码展示) 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信息提示框.本篇就结合这三

Bootstrap篇:弹出框和提示框效果以及代码展示

前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信息提示框.本篇就结合这三种类型分别来介绍下它们的使用. 一.Bootstrap弹出框

一个简单的弹出框组件

个人写这个弹出框的原因就一个,就是能给我带来可复用,追求新,要简单,可扩展.要达到炫酷有点难度,分析后还是决定以功能为主,因为是用jq和animation实现的弹出框组件,所以看起来难度不大,简称co-dialog. 灵感来源,因为工作中用到dialog,发现UI设计的弹出框的风格一直在变化,于是每次都要重新写一个弹出框,无意中增加了无用的工作量,所以果断就封装成一个弹出框组件,目前的锥形仅支持PC,然后又加入了CSS3动画效果,如果要引入动画效果就需要高版本的Browser才能使用,期望你能一

【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】

1.如何使用jQuery jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. 使用jQuery前必须下载并引用jQuery的js文件,下载链接为h

datePiker弹出框被其他div遮挡

最近在做项目的时候,datePiker弹出框被下面的div给遮挡住了,以前也碰到过这样类似的问题,之前直接在style中添加"z-index:1000".但是现在使用angular指令,在网上找了好多例子,有直接修改css的,也有在options添加zIndexOffset的,这样对于我的项目都不适用. 后来查看datepiker的源码,发现其z-index是在其父div的基础上+1.这样就不难发现,只要将其父div的z-index设置的合适就不会出现遮挡问题.下面附上对z-index

弹出框关闭图标在火狐和谷歌下生效,在IE11下不生效处理

1.问题描述: 如下图弹出框,卸载码为第一个弹出框,检索设备为第二个弹出框,第二个弹出框的关闭图标"X"在火狐和谷歌下生效,点击可以关闭弹出框,而在IE11下点击不生效,无法关闭弹出框. 2.解决思路: 不兼容IE,在IE下console下会报错,所以考虑给关闭图标加上一个"点击事件". 二种处理方式: 一.首先,获取该iframe层的times值(times值是变化的,初次是2,页面没重新加载的再点击就依次加1) var index=$(window.parent