实现方法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完成页面点击四个角弹出管理页面的更多相关文章

  1. IPhone手机页面中点击文本输入框,弹出键盘,网页会放大,如何解决

    在head标签中加入以上meta声明.具体属性可以谷歌/百度. <meta name="viewport" content="width=device-width, ...

  2. js防止安卓手机软键盘弹出挤压页面导致变形的方法

    5防止安卓手机软键盘弹出挤压页面导致变形的方法 输入框定位在底部,手机端打开,输入框聚焦后软键盘打开为什么会瞬间自动关闭呢? 先看看问题: 1.原来是这样的: 2.在苹果手机里面是正常的: 3.到了安 ...

  3. js的事件冒泡和点击其他区域隐藏弹出层

    一.前言 在编写页面的时候,我们经常使用到弹出层.对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度.如果弹出层都没有较好的体验,那何谈通过交互来提升好感... 首先提出几个弹出层的注意点: ...

  4. jquery层居中,点击小图查看大图,弹出层居中代码,顶部层固定不动,滚动条滚动情况

    jquery层居中,点击小图查看大图,弹出层居中代码 http://www.cnblogs.com/simpledev/p/3566280.html 见第一版,发现一个情况,如果页面内容多出一屏的情况 ...

  5. 弹出框页面中使用jquery.validate验证控件

    弹出框页面中使用jquery.validate验证控件有几个问题需要解决: 1,弹出框的提交事件完成后如何关闭弹出框页面? 2,提交不成功如何返回当前页? 3,如果知道验证事件成功? 之前笔者都是JS ...

  6. ASP.NET查询页面设置form的action属性只弹出一个页面,并且每次将页面设置到最前

    原文:ASP.NET查询页面设置form的action属性只弹出一个页面,并且每次将页面设置到最前 背景 当数据量大.查询条件复杂,多样多的时候,我们可能需要单独做一个查询界面,当用户选择设置了相关的 ...

  7. 后盾网lavarel视频项目---页面post方式提交之后动态弹出错误信息

    后盾网lavarel视频项目---页面post方式提交之后动态弹出错误信息 一.总结 一句话总结: 1.思路和我想的一样,有错误的时候弹出提示错误消息的模态框就好,没有错误的时候不管它 2.把模态框的 ...

  8. 禁止手机页面中A标签长按弹出路径框

    //禁止手机页面中A标签长按弹出路径框    window.onload=function(){        document.documentElement.style.webkitTouchCa ...

  9. bootstrap 弹出框点击其他区域时弹出框不消失选项设置

    默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ...

随机推荐

  1. mybatis多对多关联关系映射

    mybatis多对多关联关系映射 多对多关系在java类实体中表示为,一个类中包含了集合为另一个类的属性.而这连个实体都需要包含对方的集合类的属性. 例如:订单和商品,一个订单包含多个商品,一个商品又 ...

  2. mybatis一对一关联关系映射

    mybatis一对一关联关系映射 在关联关系中,有一对一,一对多,多对多三种关联关系. 一对一关系:在操作上,任意一方引入对方的主键作为外键. 一对多关系:在"多"的一方添加&qu ...

  3. JS 的 Document对象

    Document 对象是是window对象的一个属性,因此可以将document对象作为一个全局对象来访问. 当浏览器载入 HTML 文档, 它就会成为 Document 对象. Document对象 ...

  4. Win7安装Visual Studio 2019闪退问题

    最近在Win7 系统上安装最新版的VS2019发现 每次在这个画面之后就闪退了,即便换了台电脑也是一样的情况,于是我意识到,这应该是系统本身的问题 经过调查发现是只需要安装两个更新就可以了 这两个更新 ...

  5. Java读取二进制文件的方式

    public static void readFile(String fileName){ File file = new File(fileName); if(file.exists()){ try ...

  6. AIX中设备管理

    1.AIX系统中的设备概述 逻辑设备文件     #ls   -l  /dev   空设备文件 #/dev/null   设备的状态:undefined.defined.available.stopp ...

  7. PAT Advanced 1048 Find Coins (25 分)

    Eva loves to collect coins from all over the universe, including some other planets like Mars. One d ...

  8. [POJ1664]放苹果(动态规划)

    [POJ1664]放苹果 Description 把M个同样的苹果放在N个同样的盘子里,允许有的盘子空着不放,问共有多少种不同的分法?(用K表示)5,1,1和1,5,1 是同一种分法. Input 第 ...

  9. PCRE does not support \L, \l, \N{name}, \U, or \u...

    PCRE does not support \L, \l, \N{name}, \U, or \u... 参考文章:YCSUNNYLIFE 的 <php 正则匹配中文> 一.报错情景: 使 ...

  10. python openpyxl 简单使用

    1. 加载excel import openpyxl from openpyxl.utils import get_column_letter,column_index_from_string fro ...