ホームページ  >  記事  >  ウェブフロントエンド  >  Android Phone_html/css_WEB-ITnose の CSS マスク レイヤーの問題

Android Phone_html/css_WEB-ITnose の CSS マスク レイヤーの問題

WBOY
WBOYオリジナル
2016-06-24 11:47:031760ブラウズ

私の一般的なフレーム

はメイン DIV、幅と高さ 100%、位置固定、Z インデックス: 非常に大きいです
次に、表示される div、垂直方向の中央揃え、位置が固定されます。

しかし、これは正常に動作します。PC ブラウザで表示すると、マスクされた要素をクリックしたりスクロールしたりすることはできません。これは、ページが長すぎる場合でも下にスライドできることを意味します。しかし、easyuiのダイアログボックスはスライドできないようです
これに対処する方法

 loadingshow: function (msg) {        if (!msg) {            msg = "加载中...";        }        var jContext = $('body');        var jLoad = $("#appLoading");            var msgDIV = new Array();            msgDIV.push('<div id="appLoading" style="position:fixed;width:100%;height:100%; font-size:18px;background:rgba(0,0,0,0.5);top:0;left:0;z-index:555555">');            msgDIV.push("<div id='lContext'><img src='/App_Themes/Default/images/ajax-loader.gif' style='vertical-align:middle' /><span id='sInfo' style='margin-left:8px;display:inline-block'>" + msg + "</span>");            msgDIV.push('</div></div>');            jLoad = $(msgDIV.join('')).appendTo(jContext);            var left = jContext.width() / 2 - jLoad.find('#sInfo').width() / 2 - 20;            var top = jContext.height() / 2 - jLoad.find('#sInfo').height() / 2;            jLoad.find("#lContext").css({ position: 'fixed', top: top, left: left, color: 'white', padding: '10px', margin: '10px'});        $("#appLoading").show();//有问题请删除    },


ディスカッションに返信(解決策)

マスクレイヤーのピクセルにはパーセンテージを使用してください

マスクレイヤーのピクセルにはパーセンテージを使用してください

上はパーセンテージです

マスクレイヤーをポップアップするとき、スクロールバーが表示されないように被写体の高さを制限します 透明効果がない場合は、被写体を非表示にすることもできます

touchmove イベントをキャンセルします

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。