想做一个类似安卓Toast的效果,是用在手机web上的。
打印一行信息后,在屏幕中间显示,然后过段时间自己消失。
我用jq的height()获取屏幕的高度..但是效果不是很好的。
因为当手机网页上面内容很少的时候(就是说 页面没有下拉的滚动条),这个时候 height()就获取到屏幕的高度了。
但是有时候内容大多,下拉很长的时候,用height()获取到了这个html的高度,即便拿这个高度除以2,都得到的值也不是当前
手机浏览器的屏幕的中间...这个时候可能Toast就打印在浏览器的上方,或者超出浏览器了...
我想问,这种怎么处理啊。
我的代码:
alertToast: function (msgInfo, delTime) {
if (delTime == undefined) { delTime = 3000; }
$('#toastMsg').remove();
var jContext = $('body');
var jMsg = $('#toastMsg');
var msgDIV = new Array();
msgDIV.push('<div id="toastMsg" style="font-size:18px;background-color:black;color:white">');
msgDIV.push('<span>' + msgInfo + '</span>');
msgDIV.push('</div>');
jMsg = $(msgDIV.join('')).appendTo(jContext);
var left = jContext.width() / 2 - jMsg.find('span').width() / 2;
var top = jContext.height() / 2 - jMsg.find('span').height() / 2;
jMsg.hide();
jMsg.css({ position: 'absolute', top: top, 'z-index': '99', left: left, padding: '10px', margin: '10px' });
jMsg.fadeIn(delTime / 2)
html { height: 100%; margin: 0; padding: 0; }
设置这个css就能在网页上面内容很少的时候获取到正确浏览器页面的高度了。
用position: fixed;方式定位信息层。就无视页面滚动了,