css3 +html5+js 手机网页布局问题(在微信上使用)...两个问题

阿狸Ahri 2014-10-13 02:10:25
1.如何使一个div在屏幕的中间显示....这里是屏幕的中间,不是页面的中间
说明:

position:absolute;left:50%;top:50%;margin-top:-25%;margin-left:-25%(或者margin个具体的像素值的负数)
//又如下面的:
var h = document.body.clientHeight;
$("#update_info").css({ 'top': h/2 });

这上面的代码,都是去到页面的中间而已...
我现在有几个折叠的ul,每个折叠的ul有好多内容,我如果全部打开,我测了一下高度是1820px;
但是手机高度,比如说是500;如何按上面的代码,那就是910,他根本就不是手机屏幕的中间,这个怎么办?

2 页面的遮罩层怎么弄?
我的想法是:一个div 位置绝对,长宽100%;背景半透明,然后这个div里面在放你想要的标签。。。
这样子做的话,当这个遮罩层的div show的时候,其他的div就被它覆盖,其他的div里面的标签就不能被点击或者其他操作了。
我这样测试了,发现一个手机是可以的,另外一个手机还是可以被点击其他div的东西的,不是说手机浏览器内核都是webkit么,(手机不是很老的,系统都是4.0以上的,就是可以点击的一个像素低很多而已)
为什么这样?这面是遮罩层的div

<div id="update" style="display:none;background:rgba(0,0,0,0.5); position:absolute; width:100%; top:0; left:0;width:100%;height:100% ">
<div id="update_info" style="width:80%; height:140px; background-color:White; text-align:center; position:absolute;left:10%;top:50%;margin-top:-75px;">
<div style="width:80%; margin-left:auto; margin-right:auto; margin-top:25px; margin-bottom:0px; text-align:left;">
<input id="txtValue" type="text"/>
<asp:DropDownList ID="ddlNational" runat="server" style=" display:none; width:100%;">
</asp:DropDownList>
</div>
<div style="width:80%; margin-left:auto; margin-right:auto; margin-top:25px; padding:0px;">
<a href="javascript::" class="button" onclick="updateInfo()">修改</a>
<a href="#" class="button" onclick="close_dlg();">取消</a>
</div>
</div>

</div>
...全文
1575 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
阿狸Ahri 2014-10-15
  • 打赏
  • 举报
回复
现在还是有问题的..先结贴了
阿狸Ahri 2014-10-15
  • 打赏
  • 举报
回复
引用 5 楼 KK3K2005 的回复:
[quote=引用 3 楼 edfdfg 的回复:] [quote=引用 2 楼 KK3K2005 的回复:] 1.相对屏幕居中 其实观察下应用场景 居中的内容都比屏幕小(这个是隐含的条件) top:50%;margin-top:-25% 这样是ok的 但是你的内容 超出屏幕大小 你还要居中?我觉得这个时候 不能在强求居中了 你应该改变定位 2.能穿透透明层点下面的 那是ie吧 你吧背景变成不透明(#fff) 看看还能点穿透不
不是ie的,是手机的浏览器...麻痹的,我试了好多台都没事的,就是唯独有一台手机,他不管你遮罩不遮罩,下面的元素能被点击的,白色的不透明的效果,我试了一下,也没有效果..我郁闷了[/quote] 手机型号 分享下 以后我们碰见了 也能注意下[/quote] 我的那一台是 中兴的u930。。。安卓4.03的...我做的是web app是在微信端访问的....
阿狸Ahri 2014-10-14
  • 打赏
  • 举报
回复
fixed可以了,fixed用的不多,没怎么了解过
阿狸Ahri 2014-10-14
  • 打赏
  • 举报
回复
引用 2 楼 KK3K2005 的回复:
1.相对屏幕居中 其实观察下应用场景 居中的内容都比屏幕小(这个是隐含的条件) top:50%;margin-top:-25% 这样是ok的 但是你的内容 超出屏幕大小 你还要居中?我觉得这个时候 不能在强求居中了 你应该改变定位 2.能穿透透明层点下面的 那是ie吧 你吧背景变成不透明(#fff) 看看还能点穿透不
不是ie的,是手机的浏览器...麻痹的,我试了好多台都没事的,就是唯独有一台手机,他不管你遮罩不遮罩,下面的元素能被点击的,白色的不透明的效果,我试了一下,也没有效果..我郁闷了
KK3K2005 2014-10-14
  • 打赏
  • 举报
回复
引用 3 楼 edfdfg 的回复:
[quote=引用 2 楼 KK3K2005 的回复:] 1.相对屏幕居中 其实观察下应用场景 居中的内容都比屏幕小(这个是隐含的条件) top:50%;margin-top:-25% 这样是ok的 但是你的内容 超出屏幕大小 你还要居中?我觉得这个时候 不能在强求居中了 你应该改变定位 2.能穿透透明层点下面的 那是ie吧 你吧背景变成不透明(#fff) 看看还能点穿透不
不是ie的,是手机的浏览器...麻痹的,我试了好多台都没事的,就是唯独有一台手机,他不管你遮罩不遮罩,下面的元素能被点击的,白色的不透明的效果,我试了一下,也没有效果..我郁闷了[/quote] 手机型号 分享下 以后我们碰见了 也能注意下
KK3K2005 2014-10-13
  • 打赏
  • 举报
回复
1.相对屏幕居中 其实观察下应用场景 居中的内容都比屏幕小(这个是隐含的条件) top:50%;margin-top:-25% 这样是ok的 但是你的内容 超出屏幕大小 你还要居中?我觉得这个时候 不能在强求居中了 你应该改变定位 2.能穿透透明层点下面的 那是ie吧 你吧背景变成不透明(#fff) 看看还能点穿透不
slwsss 2014-10-13
  • 打赏
  • 举报
回复
用position: fixed; 试下

61,115

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧