HTML和JS完成页面点击四个角弹出管理页面
实现方法1:
HTML代码:
<div class="top-left-corner"></div>
<div class="top-right-corner"></div>
<div class="bottom-left-corner"></div>
<div class="bottom-right-corner"></div>
CSS代码:
.top-left-corner {
width: 100px;
height: 100px;
background: #fff;
position: absolute;
top:;
left:;
opacity:;
} .top-right-corner {
width: 100px;
height: 100px;
background: #fff;
position: absolute;
top:;
right:;
opacity:;
} .bottom-left-corner {
width: 100px;
height: 100px;
background: #fff;
position: absolute;
bottom:;
left:;
opacity:;
} .bottom-right-corner {
width: 100px;
height: 100px;
background: #fff;
position: absolute;
bottom:;
right:;
opacity:;
}
JS代码:
let [left_top_flag, right_top_flag, left_bottom_flag, right_bottom_flag] = [0, 0, 0, 0]; $('.top-left-corner').on("vmousedown", function () {
[left_top_flag, right_top_flag, left_bottom_flag, right_bottom_flag] = [1, 0, 0, 0];
$(this).css({"background": "#999", "opacity": "0.5", "border-radius": "50px"});
}); $('.top-right-corner').on("vmousedown", function () {
if (left_top_flag) right_top_flag = 1;
else return;
$(this).css({"background": "#999", "opacity": "0.5", "border-radius": "50px"});
}); $('.bottom-right-corner').on("vmousedown", function () {
if (left_top_flag && right_top_flag) left_bottom_flag = 1;
else return;
$(this).css({"background": "#999", "opacity": "0.5", "border-radius": "50px"});
}); $('.bottom-left-corner').on("vmousedown", function () {
if (left_top_flag && right_top_flag && left_bottom_flag) [left_top_flag, right_top_flag, left_bottom_flag, right_bottom_flag] = [0, 0, 0, 0];
else return;
$(this).css({"background": "#999", "opacity": "0.5", "border-radius": "50px"});
$('.top-left-corner').css('background', 'none');
$('.top-right-corner').css('background', 'none');
$('.bottom-left-corner').css('background', 'none');
$('.bottom-right-corner').css('background', 'none');
openInframe("views/admin/chooseLogin.html", "进入管理员登录界面");
});
实现方法2:
HTML代码:
<div class="hidediv" id="tl"style="position:fixed; left:0px;top:0px;width:100px;height:100px;border:0px solid red;z-index:9999"></div>
<div class="hidediv"id="tr"style="position:fixed; left:1180px;top:0px;width:100px;height:100px;border:0px solid red;z-index:9999"></div>
<div class="hidediv"id="bl"style="position:fixed; left:0px;top:680px;width:100px;height:100px;border:0px solid red;z-index:9999"></div>
<div class="hidediv" id="br"style="position:fixed; left:1180px;top:680px;width:100px;height:100px;border:0px solid red;z-index:9999"></div>
JS代码:
$(".hidediv").click(hidedivCallback); // 桌面四个角点击事件回调
function hidedivCallback() {
if (this.id == "tl") {
global.hideKey = "12";
$(this).addClass("bg-color-green");
} else if (this.id == "tr" && global.hideKey == "12") {
global.hideKey = "1234";
$(this).addClass("bg-color-green");
} else if (this.id == "br" && global.hideKey == "1234") {
global.hideKey = "123456";
$(this).addClass("bg-color-green");
} else if (this.id == "bl" && global.hideKey == "123456") {
global.hideKey = "";
$(".hidediv").removeClass("bg-color-green");
// parent.frames['mainframe'].location.href = "core/maintance/index.html";
parent.frames['mainframe'].location.href = "maintanceBranch.html"; //将core/maintance/index.html 修改为中转页面增加指纹采集
} else {
global.hideKey = "";
$(".hidediv").removeClass("bg-color-green");
}
}
HTML和JS完成页面点击四个角弹出管理页面的更多相关文章
- IPhone手机页面中点击文本输入框,弹出键盘,网页会放大,如何解决
在head标签中加入以上meta声明.具体属性可以谷歌/百度. <meta name="viewport" content="width=device-width, ...
- js防止安卓手机软键盘弹出挤压页面导致变形的方法
5防止安卓手机软键盘弹出挤压页面导致变形的方法 输入框定位在底部,手机端打开,输入框聚焦后软键盘打开为什么会瞬间自动关闭呢? 先看看问题: 1.原来是这样的: 2.在苹果手机里面是正常的: 3.到了安 ...
- js的事件冒泡和点击其他区域隐藏弹出层
一.前言 在编写页面的时候,我们经常使用到弹出层.对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度.如果弹出层都没有较好的体验,那何谈通过交互来提升好感... 首先提出几个弹出层的注意点: ...
- jquery层居中,点击小图查看大图,弹出层居中代码,顶部层固定不动,滚动条滚动情况
jquery层居中,点击小图查看大图,弹出层居中代码 http://www.cnblogs.com/simpledev/p/3566280.html 见第一版,发现一个情况,如果页面内容多出一屏的情况 ...
- 弹出框页面中使用jquery.validate验证控件
弹出框页面中使用jquery.validate验证控件有几个问题需要解决: 1,弹出框的提交事件完成后如何关闭弹出框页面? 2,提交不成功如何返回当前页? 3,如果知道验证事件成功? 之前笔者都是JS ...
- ASP.NET查询页面设置form的action属性只弹出一个页面,并且每次将页面设置到最前
原文:ASP.NET查询页面设置form的action属性只弹出一个页面,并且每次将页面设置到最前 背景 当数据量大.查询条件复杂,多样多的时候,我们可能需要单独做一个查询界面,当用户选择设置了相关的 ...
- 后盾网lavarel视频项目---页面post方式提交之后动态弹出错误信息
后盾网lavarel视频项目---页面post方式提交之后动态弹出错误信息 一.总结 一句话总结: 1.思路和我想的一样,有错误的时候弹出提示错误消息的模态框就好,没有错误的时候不管它 2.把模态框的 ...
- 禁止手机页面中A标签长按弹出路径框
//禁止手机页面中A标签长按弹出路径框 window.onload=function(){ document.documentElement.style.webkitTouchCa ...
- bootstrap 弹出框点击其他区域时弹出框不消失选项设置
默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ...
随机推荐
- mybatis多对多关联关系映射
mybatis多对多关联关系映射 多对多关系在java类实体中表示为,一个类中包含了集合为另一个类的属性.而这连个实体都需要包含对方的集合类的属性. 例如:订单和商品,一个订单包含多个商品,一个商品又 ...
- mybatis一对一关联关系映射
mybatis一对一关联关系映射 在关联关系中,有一对一,一对多,多对多三种关联关系. 一对一关系:在操作上,任意一方引入对方的主键作为外键. 一对多关系:在"多"的一方添加&qu ...
- JS 的 Document对象
Document 对象是是window对象的一个属性,因此可以将document对象作为一个全局对象来访问. 当浏览器载入 HTML 文档, 它就会成为 Document 对象. Document对象 ...
- Win7安装Visual Studio 2019闪退问题
最近在Win7 系统上安装最新版的VS2019发现 每次在这个画面之后就闪退了,即便换了台电脑也是一样的情况,于是我意识到,这应该是系统本身的问题 经过调查发现是只需要安装两个更新就可以了 这两个更新 ...
- Java读取二进制文件的方式
public static void readFile(String fileName){ File file = new File(fileName); if(file.exists()){ try ...
- AIX中设备管理
1.AIX系统中的设备概述 逻辑设备文件 #ls -l /dev 空设备文件 #/dev/null 设备的状态:undefined.defined.available.stopp ...
- PAT Advanced 1048 Find Coins (25 分)
Eva loves to collect coins from all over the universe, including some other planets like Mars. One d ...
- [POJ1664]放苹果(动态规划)
[POJ1664]放苹果 Description 把M个同样的苹果放在N个同样的盘子里,允许有的盘子空着不放,问共有多少种不同的分法?(用K表示)5,1,1和1,5,1 是同一种分法. Input 第 ...
- PCRE does not support \L, \l, \N{name}, \U, or \u...
PCRE does not support \L, \l, \N{name}, \U, or \u... 参考文章:YCSUNNYLIFE 的 <php 正则匹配中文> 一.报错情景: 使 ...
- python openpyxl 简单使用
1. 加载excel import openpyxl from openpyxl.utils import get_column_letter,column_index_from_string fro ...