如何做DIV模态视图
来源:互联网 发布:打字网络兼职 编辑:程序博客网 时间:2024/06/07 02:57
之前用DIV作一个模态窗口,觉得这样的效果还不错,某些时候,加载太多的JQuery,难免使得运行速度变慢。不使用JQuery,我们也可以用DIV来模拟模态窗口。如下图所示:
效果就差不多是这样了,示例文件用的黑色作为背景。虽然这样的模态窗口看起来比较简单,但还是比较实用的。
它的基本思想如下:
预先隐藏的一个DIV框架,这个DIV框架内可以没有任何内容,然后我们通过Javascript调用执行,让这个窗口显示,而且调用的时候通过参数为DIV设置必要内容。另外就是有一个铺满整个屏幕的大DIV层,这个层设置为半透明,z-index属性要比其他层高,比弹出框小。这样就可以保证用户只能操作弹出层。当用户不需要后即可点击确定按钮关闭,当然,你还可以在上面设置更多的按钮,可以自己定义样式,很方便。
在网上我看到有一些人设置的模态窗口,其基本思想和我这个差不多,但是有一个问题:就是当用户的页面很长的时候,那个半透明的遮罩层只显示整个屏幕那么大,当用户拖动滚动条的时候,下面部分就没办法遮住,使得用户可以任意操作。而且,弹出层也会随着滚动条上下滚动,不会始终居于屏幕某一位置。
这样就给用户造成了很多不变,使用这个模态窗口如同鸡肋,食之无味,弃之可惜。那么,有什么办法可以解决呢?
其实很简单,请看下面的代码:
显示内容的div
.div_content
{
display:none;
position: fixed;
top: 50%;
left: 50%;
width: 480px;
margin-left:-240px;
height: 300px;
margin-top:-150px;
padding: 0;
border: 12px solid #3777BC;
background-color: #F0F5F8;
_position:absolute;
z-index:1011;
overflow: hidden;
}
遮盖整个屏幕的div
.div_overlay
{
display:none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1010;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
之前,为了解决这一问题,我使用javascript来控制,当弹出窗口时就检测一下当前浏览器可显示高度和整个滚动浏览的高度,即document.documentElement.clientHeight和document.body.offsetHeight,如果前者的高度小于后者,就说明当前有滚动条的出现。因此就设置遮罩层的高度为后者,否则显示前者,即100%。
但这一解决方法实在是错误,在某些页面可行,但另一些页面却完全行不通。检查了N遍都不行,而在另一些页面又行,这个令我颇为不解。后来想,这样的方法也许不太好,于是才想到,应该把position的属性改为:fixed。把遮罩层和弹出层的position属性都改为fixed,问题便完美解决,弹出框既不会随着滚动条随便滚动了,遮罩层也会布满整个屏幕,随时都如此。
- 如何做DIV模态视图
- 如何做DIV模态窗口
- 如何做DIV模态窗口
- 如何做Div的圆角
- 如何从模态视图push到下一个ViewController
- json+jquery做视图
- XIB做视图组件
- div做细线表格
- div 做滚动条
- IE里兼容性视图是做什么用的?该如何设置?
- SplitViewController只能做根视图,如何从一个ViewController跳转到SplitViewController
- 如何将一个div水平垂直居中?4种方法做推荐
- 模态视图-多视图应用
- 模态视图跳转到根视图
- iphone--给视图做修饰
- 模态视图
- 模态视图
- 模态视图
- 生命的旅途,一程有一程的风景
- 在vim上实现跳转到定义处的方法
- WebView使用全攻略
- 基于Selenium2和TestNG的自动化测试
- 在url中%E4%BD%A0和汉字的相互转换
- 如何做DIV模态视图
- 自定义折线统计图
- -[Model length]: unrecognized selector sent to instance 0x788f0f30
- Java高级特性之反射学习总结
- C++builder串口通信设计(一)-串口接收数据
- JavaScript插件化开发教程 (二)
- 移动工作中需要注意的东西
- js实现继承的5种方式
- opensips添加离线消息功能