通过jquery的show()和hide()函数联合使用，实现d出窗口。
一、show（）和hide（）函数解析：
1、show() 方法显示隐藏的被选元素。
注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。
2、hide() 方法隐藏被选元素。
这与 CSS 属性 display:none 类似，但是隐藏的元素不会被完全显示（不再影响页面的布局）。
二、设计一个HTML页面，包括一个简单的d出窗，和一个显示按钮。其中，调用了jquery的以上两个函数。具体代码如下：
三、设计遮罩层的样式，如下：
四、d出窗口的css样式，代码如下：
五、初始页面如下：
六、点击按钮，查看d出窗口结果：
七、关闭d出窗后，打开开发者中心，如下：
<html><style type="text/css">
.black_overlay{
display: none
position: absolutetop: 0%
left: 0%
width: 100%
height: 100%
background-color: black
z-index:1001
-moz-opacity: 0.8
opacity:.80
filter: alpha(opacity=80)
}
.white_content{
display: none
position: absolute
top: 25% left: 25%
width: 50%
height: 50%
padding: 16px
border: 16px solid black
background-color: white
z-index:1002
overflow:auto
}
</style>
<script type="text/javascript">
</script>
<body>
<input type="button" text="d出层" onClick="document.getElementById('light').style.display='block'document.getElementById('fade').style.display='block'">
<div id="light" class="white_content">
<a href="#" onClick="document.getElementById('light').style.display='none'document.getElementById('fade').style.display='none'" style="color:blackz-index:9999">Close</a>
<div style="width:715pxheight:360pxborder:#ccc solid 1px" id="dituContent">
这里就是d出的内容
</div>
</div>
</body>
</html>
就是这样的。使用postion属性和层的隐藏和显示就实现啦
移动web聊天页面，输入框在底部的时候，点击输入，d起软键盘，iOS在将页面推上的时候会回d一下，导致键盘刚好遮挡到输入框。
初次触发输入框的focus的时候，iOS 键盘默认是以英文键盘高度推上页面，但一般我们的默认输入是中文，会导致软键盘的高度变化，中文输入键盘高度高于英文，所以导致了遮挡。
Element.scrollIntoViewIfNeeded() 方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。 如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。 此方法是标准的 Element.scrollIntoView() 方法的专有变体。
当键盘在切换中英输入法时，键盘高度变化仍然会引起键盘遮挡
监听输入框的 focus 、 blur 事件，当聚焦时，循环调用 input.scrollIntoViewIfNeeded 方法。
当监听到 blur 时，停止循环。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）