`
zhanghh315
  • 浏览: 16112 次
  • 性别: Icon_minigender_2
  • 来自: 长春
社区版块
存档分类
最新评论

js弹出框或者提示框居中显示

阅读更多

        今天又‘2’了,写了居中问题,居然把参数传错了,找了好久,测试了好久都没找出来,在此感谢我的partner的灵机一动。

KISSY.add('app/login',function(S){
    function init(obj){
        center(obj);
        $(window).resize(function(){
            center(obj);
        });
        $(window).scroll(function(){
            center(obj);
        });
    }
    function center(obj){
        var winWidth = $(window).width();
        var winHeight = $(window).height();
        var scrolltop = $(document).scrollTop();
        var width = obj.width();
        var height = obj.height();
        var objLeft = (winWidth - width)/2;
        var objTop = (winHeight - height)/2 + scrolltop;
        obj.css({left: objLeft + 'px', top: objTop + 'px'});
    }
    PW.namespace('login');
    PW.login = init;
},{requires:['thirdparty/jquery']})
 
分享到:
评论
2 楼 zhanghh315 2012-09-18  
shenlm203 写道
亲,没注意看你的center组件,不过呢这个有点儿小意见。非IE6可以用fixed属性,那么在scroll的时候就不需要绑定事件了。 还有就是绝对居中不需要js,css就可以做到absolute的DOM的绝对剧中。

最后,center组件的接口传入参数最好是一个HTML DOM,或者是css selector,并且在传入进来之后的第一个操作是判断是否具有position:absolute|fixed属性!

此致,敬礼

亲,你说的是好几种情况下各自的解决办法,但是这个办法可以解决所有的情况,当然是这个好啦
1 楼 shenlm203 2012-09-18  
亲,没注意看你的center组件,不过呢这个有点儿小意见。非IE6可以用fixed属性,那么在scroll的时候就不需要绑定事件了。 还有就是绝对居中不需要js,css就可以做到absolute的DOM的绝对剧中。

最后,center组件的接口传入参数最好是一个HTML DOM,或者是css selector,并且在传入进来之后的第一个操作是判断是否具有position:absolute|fixed属性!

此致,敬礼

相关推荐

    jquery点击弹出可放大居中关闭对话框.zip

    jquery点击弹出可放大居中关闭对话框是一款点击按钮弹出对话框,可以拉伸,移动,关闭的对话框。

    jQuery 弹出层 浮动遮罩层 提示框 并随页面滚动而滚动

    jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难,只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如:我想要这里是弹出浮动遮罩层</div> 并随页面...

    js特效,各种页面弹出浮动

    仿frontpage可拖曳的对话窗口.htm 点击弹出窗口层,并且背景变暗渐变.htm 设定时间弹出窗口.htm ...随同主窗口同时弹出的附加小窗口.htm ...JavaScript模拟SELECT下拉菜单.htm ...提示框窗口自动居中.html

    Js弹出层效果,带阴影可关闭的弹出框

    摘要:脚本资源,Ajax/JavaScript,弹出层,弹出框 Js弹出层初步效果,带阴影效果,带关闭按钮。基本功能:拖动、拖动边框改变大孝设置宽、高、TOP、LEFT、关闭、绝对居中、边栏效果,可以自行编辑弹出层内容。提示,...

    javascript 弹出层居中效果的制作

    做一个带拖动的弹出层效果(像提示框那种) ,看了下代码与实现效果,值得学习应用。

    JTooltips javascript 提示框

    在做B/S开发的时候,通常会遇到很多的客户与服务器的交流,而浏览器自带的弹出工具条是不能修改样式的,用JS模拟一个华丽的工具条逐渐成为这一形式的主流,而这些工具条平时的开发当中重复量很大。JTooltips插件致力...

    JavaScript网页特效范例宝典源码

    实例005 控制弹出窗口居中显示 7 实例006 弹出的窗口之Cookie控制 9 实例007 为弹出的窗口加入关闭按钮 11 实例008 关闭弹出窗口时刷新父窗口 12 实例009 关闭IE主窗口时,不弹出询问对话框 13 1.2 弹出网页对话框 ...

    程序天下:JavaScript实例自学手册

    20.18 弹出框式邮件发送 20.19 把网站作为用户的Active桌面 20.20 判断是否安装了flash插件 第21章 流行技术:DOM和userData的应用技巧 21.1 使用userData保存文本内容 21.2 使用userData保存select标记 21.3 使用...

    《程序天下:JavaScript实例自学手册》光盘源码

    20.18 弹出框式邮件发送 20.19 把网站作为用户的Active桌面 20.20 判断是否安装了flash插件 第21章 流行技术:DOM和userData的应用技巧 21.1 使用userData保存文本内容 21.2 使用userData保存select标记 21.3 使用...

    JavaScript实用范例词典04-14

    5.35 弹出一个居中显示的窗口... 137 5.36 弹出一个全屏幕窗口... 138 5.37 在弹出的窗口中显示菜单... 139 5.38 在弹出的窗口中显示标准按钮栏... 140 5.39 在弹出的窗口中显示地址栏... 141 5.40 在弹出的...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    4.jQuery超炫淡入淡出效果DIV渐变居中弹出框插件下载 5.jquery黑色+蓝色风格DIV提示框示例 6.一款jQuery+DIV居中淡入淡出信息提示框示例 7.一款jQuery可拖动提示窗插件(对话框Dialog插件) 8.一款基于jQuery...

    ExtAspNet_v2.3.2_dll

    -Grid增加GetNoSelectionAlertInParentReference函数,用来表示没有选中任何一项时在父页面弹出对话框的JS代码。 -修正IE7下不能以下划线作为CSS中类名的前缀的BUG(feedback:Steve.Wei)。 -添加定时器控件Timer,...

    Web前端大作业2.0.zip

    才能报名,填写完毕后点击报名,会弹出“恭喜棋手,报名成功,请等待组委会后续短信通知比赛规则”提示框,点击确定即可关闭报名成功提示框。 3、网站具体设计过程 首先选定 本网页制作工具是前端开发利器: ...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -Grid增加GetNoSelectionAlertInParentReference函数,用来表示没有选中任何一项时在父页面弹出对话框的JS代码。 -修正IE7下不能以下划线作为CSS中类名的前缀的BUG(feedback:Steve.Wei)。 -添加定时器控件Timer,...

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...

    超实用的jQuery代码段

    1.30 页面加载后消息框居中显示 1.31 创建页面固定浮动栏的方法 第2章 jQuery操作DOM元素 2.1 如何验证某个元素是否为空 2.2 检查特定的HTML元素是否存在 2.3 判断HTML元素是否嵌套 2.4 获取当前元素的索引值 2.5 ...

    IBM WebSphere Portal门户开发笔记01

    18、弹出窗口居中显示JS代码 255 19、CSS渐变样式 256 20、JS READYSTATE 256 21、JS与页面刷新、关闭事件 257 22、SHOWMODALDIALOG和SHOWMODELESSDIALOG及其右下角提示框 257 23、特殊字体样式 258 24、JS确认窗口...

Global site tag (gtag.js) - Google Analytics