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

本文討論了使用HTML5表單驗證屬性,例如必需的,圖案,最小,最大和長度限制,以直接在瀏覽器中驗證用戶輸入。

本文討論了HTML&lt; meter&gt;元素,用於在一個範圍內顯示標量或分數值及其在Web開發中的常見應用。它區分了&lt; meter&gt;從&lt; progress&gt;和前

本文討論了視口元標籤,這對於移動設備上的響應式Web設計至關重要。它解釋瞭如何正確使用確保最佳的內容縮放和用戶交互,而濫用可能會導致設計和可訪問性問題。

本文討論了&lt; iframe&gt;將外部內容嵌入網頁,其常見用途,安全風險以及諸如對象標籤和API等替代方案的目的。

HTML適合初學者學習,因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩,易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高,可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。
