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

弹出框div:
<div class="webbox" style="">
            <div class="webboxtop">
                <span class="tstitle">发货网点(收货网点)</span>
            <a href="#" class="closebox"></a>
            </div>
            <div class="webboxnr">
                <input type="text" class="search" id="tt" value="" onblur="this.focus();" style="">
            </div>
        </div>
背景透明div
<div class="zzblack" style="display: block;"></div>
居中css:
.webbox{ width: 520px;height: 350px; background: #FFFFFF;position: fixed; z-index: 999; left: 50%; top: 50%; margin-left: -260px; margin-top: -150px;}
.webboxtop{ height: 40px; line-height: 40px; background: #00C049;  padding-left: 15px; color: #FFFFFF; font-size: 14px; }
.closebox{ display: block;  float:right;width: 28px; height: 28px; background: url(../img/close.png) no-repeat; margin-top: 6px; margin-right: 10px;}
.tstitle{ float: left; display: block;}
.webboxnr{ width: 450px; margin: 0 auto; line-height: 30px; margin-top: 20px; }
.search{ width: 450px; height: 35px; line-height: 35px; color: #666666; font-size: 14px; text-indent:0.5em;border: 1px solid #CCCCCC; border-radius: 5px;}
.zzblack{ width:100%; height:100%;position: absolute; top: 0; left: 0; background: #888; opacity: 0.5;-webkit-opacity: 0.5; -moz-opacity: 0.5;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);}

时间: 2024-10-08 03:15:18

弹出框背景色透明滚动条滚动仍然居中的相关文章

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

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

设置easyUi弹出窗在弹出框(iframe)中不居中问题

 $("#w").window({     top:($(window).height() - 420) * 0.5,       left:($(window).width() - 480) * 0.5,                });   $("#w").window('open');

弹出框滑动,底部不跟着滑动

弹出框里有滚动条,并且页面也有滚动条时,在弹出框内滑动时底部页面也会跟着滑动,试了下当弹出框出现时加上$('body').css({'height','100%','overflow','hidden'});不起作用,后来在弹出框上加上以下代码便起作用了. $('body').css({ 'overflow':'hidden', 'position': 'fixed', 'top': scrollTop*(-1) }); 弹出框关闭后,再恢复 $('body').css({ 'overflow'

利用z-index属性实现网页弹出框

java web应用开发过程中,有些用户操作需要以弹出框形式展示,今天对以往项目开发中的弹出框实现原理仔细分析了一下,使用CSS的z-index属性,可以实现简单的弹出框效果.具体原理: .mask{ z-index:900; position:fixed!important; position:absolute; left:0px; top:0px; width:100%; height:100%; background:#000; filter: alpha(opacity=45); opa

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

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

Bootstrap模态弹出框

前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作,也有可能弹出的是一张图片.本文将详细介绍Bootstrap模态弹出框 结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,其主要又包括三个部分: ? 

弹出框插件

本插件ccShow是用来在前端显示弹出框,用户可以点击按钮,弹出一个框,也可以Ajax请求时,弹出提示语,请求中,等Ajax结束后,就显示已完成或者请求失败等情况.基于jQuery的插件,兼容各种浏览器. var ccShow = {}; var isSetTimeOut=false; var isShow = false, showType = ""; ccShow.showMsg = function (rb, type, willHide,callback,showTime) {

Bootstarp学习(二十三)模态弹出框(Modals)

这一小节我们先来讲解一个"模态弹出框",插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的"modal.js"文件. 样式代码: ? LESS版本:modals.less ? Sass版本:_modals.scss ? 编译后的Bootstrap:对应bootstrap.css文件第5375行-第5496行 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中

layer弹出框初体验

今天有需要用到了layer弹出框,要求:制作一个如图所示的弹出框: 首先,查看官方文档,官方演示讲解文档,链接: 关于皮肤设置拓展,链接: 使用layer.alert(),默认标题是"信息",还有配色不符合我的要求, 所以着手改标题和皮肤 标题用title:'';控制,因为是局部改变,直接在内部使用skin:'';在layer.css加上自定义的标题背景色,和按钮色 默认的弹窗框大小需要修改,用area['280px','150px'];控制,但是按钮会跑到框外,于是改为area['2