css3 +html5+js 手机网页布局问题(在微信上使用).两个问题_html/css_WEB-ITnose
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>
回复讨论(解决方案)
用position: fixed; 试下
1.相对屏幕居中 其实观察下应用场景 居中的内容都比屏幕小(这个是隐含的条件)
top:50%;margin-top:-25% 这样是ok的
但是你的内容 超出屏幕大小 你还要居中?我觉得这个时候 不能在强求居中了 你应该改变定位
2.能穿透透明层点下面的 那是ie吧 你吧背景变成不透明(#fff) 看看还能点穿透不
1.相对屏幕居中 其实观察下应用场景 居中的内容都比屏幕小(这个是隐含的条件)
top:50%;margin-top:-25% 这样是ok的
但是你的内容 超出屏幕大小 你还要居中?我觉得这个时候 不能在强求居中了 你应该改变定位
2.能穿透透明层点下面的 那是ie吧 你吧背景变成不透明(#fff) 看看还能点穿透不
不是ie的,是手机的浏览器...麻痹的,我试了好多台都没事的,就是唯独有一台手机,他不管你遮罩不遮罩,下面的元素能被点击的,白色的不透明的效果,我试了一下,也没有效果..我郁闷了
fixed可以了,fixed用的不多,没怎么了解过
1.相对屏幕居中 其实观察下应用场景 居中的内容都比屏幕小(这个是隐含的条件)
top:50%;margin-top:-25% 这样是ok的
但是你的内容 超出屏幕大小 你还要居中?我觉得这个时候 不能在强求居中了 你应该改变定位
2.能穿透透明层点下面的 那是ie吧 你吧背景变成不透明(#fff) 看看还能点穿透不
不是ie的,是手机的浏览器...麻痹的,我试了好多台都没事的,就是唯独有一台手机,他不管你遮罩不遮罩,下面的元素能被点击的,白色的不透明的效果,我试了一下,也没有效果..我郁闷了
手机型号 分享下
以后我们碰见了 也能注意下
1.相对屏幕居中 其实观察下应用场景 居中的内容都比屏幕小(这个是隐含的条件)
top:50%;margin-top:-25% 这样是ok的
但是你的内容 超出屏幕大小 你还要居中?我觉得这个时候 不能在强求居中了 你应该改变定位
2.能穿透透明层点下面的 那是ie吧 你吧背景变成不透明(#fff) 看看还能点穿透不
不是ie的,是手机的浏览器...麻痹的,我试了好多台都没事的,就是唯独有一台手机,他不管你遮罩不遮罩,下面的元素能被点击的,白色的不透明的效果,我试了一下,也没有效果..我郁闷了
手机型号 分享下
以后我们碰见了 也能注意下
我的那一台是 中兴的u930。。。安卓4.03的...我做的是web app是在微信端访问的....
现在还是有问题的..先结贴了

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

本文讨论了视口元标签,这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互,而滥用可能会导致设计和可访问性问题。

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

本文讨论了&lt; iframe&gt;将外部内容嵌入网页,其常见用途,安全风险以及诸如对象标签和API等替代方案的目的。
