onresize的应用--自适应弹窗

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自适应窗口</title>
<style>
body{
margin: 0;
padding: 0;
position: relative;
}
#pop{
position: absolute;
/*top: 50%;
left: 50%;
margin: -150px 0 0 -240px;*/
width: 480px;
height: 300px;
border: 1px solid #f00;
}
#fullscreen{
position: absolute;
top: 0;
right: 0;
}
#restore{
position: absolute;
top: 0;
right: 50px;
}

</style>
<script>
window.onload = function(){
var btnFullscreen = document.getElementById('fullscreen');
var btnRestore = document.getElementById('restore');
var pop = document.getElementById('pop');
//点击是弹窗全屏显示
//width,height,top,left
btnFullscreen.onclick = function(){
//innerWidth/innerHeight //浏览器中可是区域的尺寸
//outerWidth/outerHeight //整个浏览器窗口的尺寸
changSize();
}
//onresize//窗口大小改变时触发
window.onresize = function (){
changSize();
}
btnRestore.onclick = function(){
reSize();
}
function changSize(){

pop.style.width = window.innerWidth -2 + 'px';
pop.style.height = window.innerHeight -2 +'px';

pop.style.top = 0;
pop.style.left = 0;
}
function reSize(){
pop.style.width ='';
pop.style.height ='';
pop.style.top = '';
pop.style.left = '';

}
}
</script>
</head>
<body>
<div id="pop">
<button id="fullscreen">全屏</button>
弹窗内容
<button id="restore">还原</button>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/R-jia-bao/p/6144963.html

onresize的应用--自适应弹窗相关推荐

html弹出窗口加载别的页面地址,仿layer.open打开新窗口URL，自适应URL页面高度
layer.open打开新窗口URL,不能在弹出窗口的同时根据所打开URL地址页面的大小,弹出的同时自适应窗口大小,所以根据需要自己写了一个,请参考指正. 首先加载jquery 下面是js代码: // ...
js进阶之onresize
常用窗口事件–onresize 当窗口或框架发生改变的时候就会调用; onresize一般用于自适应页面布局等多屏幕适用场景; 获取屏幕的分辨率:**window.screen.width.scree ...
echarts贵州地图展示自定义贵安新区
要求和预期结果: 实现贵州地市地图效果,并且鼠标过去有数据展示,贵安新区数据无法展示,弄个自定义地图展示出来相关文件准备,加载地图和部分相关组件.echarts.min.js 和 guizhou.j ...
vue项目通过url链接引入其他系统页面
1.正常配置菜单,在vue页面使用iframe进行嵌套加载其它系统的页面,已加载百度为例 <template><div id="app"><ifram ...
EASY spa单页面版文档
1.1.导入项目下载项目后进行解压使用IDEA.WebStorm.HBuilder等前端开发工具打开打开index.html点击右上角浏览器图标运行: 注意: 必须以http://的形式访问,而 ...
阿里国际站-唤端技术的探索与演进
作者:黄昭阿里ICBU买家增长技术团队近几年用户增长领域APP推广发展迅猛,而唤端就是其中的重要技术.通过唤端拉新/促活不仅能能够将三方流量规模做大,同时二方流量也能有效利用,给网站不断带来商机, ...
PostMessage的原理和实际应用
PostMessage的原理和实际应用文章主要想聊的是关于 PostMessage 的用途.虽然搜索引擎里关于 PostMessage 文档一抓一大把,大多是介绍api,说明它能跨域等,但关于它的实 ...
视频打赏/付费视频引流吸粉/定时弹窗广告+自带视频+支付接口+自适应设计/带安装教程
源码pc和H5自适应!视频引流吸粉源码,弹窗支付!自带上万部高清视频!绝对是吸金神器. 功能介绍: 1.带有开启是否连续自动播放功能 2.支持手动点击看下一个视频 3.支持引流跳转指定网址,产品地址, ...
vue+element弹窗可拖拽拉伸和弹窗内table高度自适应
需求是这样的:需要将目前的el-dialog弹窗都改成可拉伸和拖拽的.并且做自适应.(一番交涉下来,最终是如果弹窗里面有table的话,我们给table的高度自适应,普通表单不需要). 确定了需求,准 ...

onresize的应用--自适应弹窗

onresize的应用--自适应弹窗相关推荐

最新文章

热门文章