一个弹出层,相对浏览器居中,可以随浏览器缩放大小,有最大值和最小值(当然不支持ie6)

下边是代码

.div1{ position: fixed; z-index: 9999; background: #ccc; width: 100%; height: 100%; left: 0; top: 0}
.div2{ position: absolute; min-width: 320px; max-width: 650px; height: 500px; width: 50%; margin: auto; left: 0; right: 0; top: 0; bottom: 0;  background: #444}

<div class="div1">
    <div class="div2">aa</div>
<div>
时间: 2024-10-11 21:47:19

一个弹出层,相对浏览器居中,可以随浏览器缩放大小,有最大值和最小值(当然不支持ie6)的相关文章

Ajax加载外部页面的一个弹出层效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Ajax加载外部页面的一个弹出层效果<

创建一个弹出层

/* 功能 * 1. 弹出层的基类, 比下层拥有更高的优先级, 用于屏蔽下层,及本层外触摸事件 * 2. 提供一个容量,及相应方法,用于装纳需要处理事件的对象 CCTouchDelegate*对象, */ #ifndef __MythLeague__UpperLayer__ #define __MythLeague__UpperLayer__ #include "Global/Constants.h" #include "CommonLayer/TouchLogicLayer

制作一个有模态的弹出层

参考慕课网课程<分享:阿当大话西游之WEB组件> 定制不同的皮肤可通过对元素添加或减少class类来实现. 首先,模态是指如下图部分的灰色背景部分:(灰色部分不可点击) 然后,要记住,模态要加在当前页面的上面,以及当前操作框(通常是一个弹出层)的下面 所谓上面,下面是指: 如果模态(通常是一个div)的定位是fixed(固定定位)的,那么它将不占据文档空间, 所以,将其height和width设置为100%,另外,设置left:0;top:0.即为铺满整个屏幕. 然后,在html中,处于此di

实现一个简单的弹出层

弹出层的实现方式是让一个块层遮挡住最底下的层,在最顶上显示相应的内容,因为最底下的块级和最上面的块级属于一个页面,他们之间也可以共享一些数据(实现一些特定的操作) 下面是简单的一个实现的过程 首先我们定义一个基本的页面结构 <div id="show"> //最底下的层 <input type="button" value="测试" id="test"/> </div> <div id

JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

JavaScript学习总结(一)--延迟对象.跨域.模板引擎.弹出层.AJAX示例 目录 一.AJAX示例 1.1.优点 1.2.缺点 1.3.jQuery AJAX示例 二.延迟对象(Deferred) 2.1.回调函数 2.2.deferred.done 三.跨域 3.1.什么是跨域 3.2.JSONP跨域 3.3.jQuery使用JSONP跨域 3.4.跨域资源共享(CORS) 3.5.小结 四.弹出层 五.模板引擎 5.1.Hello World 5.2.方法 5.3.与AJAX结合应

涉及到弹出层的opacity样式问题

最近遇到一个弹出层在Chrome中重复的问题,观察发现是opacity引起的以下是代码及现象<!DOCTYPE html><html> <head>        <meta charset="UTF-8">        <title></title>        <style>            .fixing {                position: absolute;     

jquery 简单弹出层

预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* width height is defined by javascript */ position: absolute; top:0; left: 0; z-index: 1000; background-color: #000; opacity: 0.2; *filter:alpha(opacity=2

jquery 简单弹出层(转)

预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* width height is defined by javascript */ position: absolute; top:0; left: 0; z-index: 1000; background-color: #000; opacity: 0.2; *filter:alpha(opacity=2

javascript实现掉落弹出层------Day29

顾名思义,所谓"掉落弹出层",就是出现一个弹出层,而出现的位置是从上方向下掉落,掉落到指定的位置停止,这样分析起来,和"右下角弹出提醒对话框"比起来,确有异曲同工之妙啊,一个从上向下,一个由下及上. 实现原理: 我们不妨肢解了这个动作来看,可以大概分为这几个部分: 1.弹出弹出层,弹出层位置在屏幕上方不可见: 2.弹出层从上而下的降落: 3.弹出层到达指定位置,停止降落: 如果加上缓冲弹跳效果的话,就是四部分: 4.出现缓冲弹跳效果,直到静止,而弹跳效果简单了说,就