js实现蒙版效果

el/2023/6/3 16:51:33 
    <style>body html{width:100%;}body{height:3000px;}*{margin:0;padding:0;}#panel{width:100%;height:100%;background-color:#000;opacity:0.4;/*解决IE兼容透明度*/filter: alpha(opacity:40);position:absolute;left:0;top:0;display:none;}#login{width:300px;height:300px;background: skyblue;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;position: fixed;left:50%;top:50%;margin: -150px 0 0 -150px;display:none;}</style>

<body><button id="btn">立即登录</button><div id="panel"></div><div id="login"></div><script>window.onload=function () {//1.监听按钮的点击document.querySelector("#btn").onclick=function (e) {//点击登录按钮阻止冒泡if(e&&e.stopPropagation){e.stopPropagation();}else{window.event.cancelBubble=true;}//1.1显示面板和蒙版document.querySelector("#panel").style.display="block";document.querySelector("#login").style.display="block";//当出现蒙版时,去除body的滚动条document.body.style.overflow="hidden";};//2.点击文档document.onclick=function (event) {         var e=event||window.event;//2.1获取点击的标签var targetId=e.target?e.target.id:e.srcElement.id;if(targetId!=='login'){document.querySelector("#panel").style.display="none";document.querySelector("#login").style.display="none";//当出现蒙版时,去除body的滚动条document.body.style.overflow="visible";}}}</script>
</body>
http://www.ngui.cc/el/3419063.html

相关文章

Vision.CascadeObjectDetector-VJ算法学习

VJ算法MATLABVision.CascadeObjectDetector1.描述2.创建2.1 句法&描述2.2 Properties2.2.1 Classification Model-训练级联分类模型2.22 MinSize-最小可检测对象的大小 | [ ] 双元素向量2.23 MaxSize-最大可检测对象的大小 | [ ] 双元素向量2.24 ScaleFactor-缩放多尺度对象…
阅读更多...

QT5_停靠窗口加各种控件

停靠窗口可以方便快捷的管理界面，更能让使用者感受到应用的便捷操作。但是停靠窗口本身就是一个Widge，是不能自主将控件加上去并进行排列的。这里提供了一种简单的方法来实现在停靠窗口上加控件。 1.首先讲一下停靠窗口QDockWidge类 #include <QTextEdit> #include &…
阅读更多...

QT5限制QLineEdit输入范围

一、代码结构： (不管是浮点还是整数都是这个结构，只是QRegExp不同) QRegExp rx("(^-?180$)|(^-?1[0-7]\\d$)|(^-?[1-9]\\d$)|(^-?[1-9]$)|^0$"); QRegExpValidator *pReg = new QRegExpValidator(rx, this); lineEdit->setValidator(pReg);二、简单限制 …
阅读更多...

Qt的QString用法，修改、截取，查找

获取字符在字符串中的位置 QString str "ATLOCLOCATION: 115.850441,33.004833"; QString s "LOC"; str.indexOf(s); //3 str.indexOf(s, 6); //7QString str "ATLOCLOCATION"; QString s "O"; str.lastIndexOf(s); //13截取指定…
阅读更多...

QT的QChart显示

1.必加项 工程文件.pro: QT += charts.h文件： #include <QtCharts>2.基础函数 //设置x轴(y轴同理) QValueAxis *axisx = new QValueAxis;//新建x轴 axisx->setGridLineVisible(true);//设置网格可见 axisx->setTickCount(10);//设置轴上的主要刻度线数目…
阅读更多...

Qt 文本文件的打开、新建、保存以及另存为

转载链接&#xff1a;https://blog.csdn.net/WQ_1996/article/details/78237151 我们平时在使用windows的notepad以及其他各种软件过程中&#xff0c;都会有保存文件和另存为两种功能&#xff0c;这两者不能混为一谈。 一、保存时有两种情况&#xff0c;一种是对于新创建的文件…
阅读更多...

给pycharm快速添加Opencv库

前提 1.安装好python,已经配置好环境. 2.安装好pycharm，配置好python 注意：未安装这些软件的话可以直接百度或者csdn搜索下载 流程 1.找到python的源文件夹，打开可以看到pip2.然后运行cmd 输入： 有这种界面出现就算是正常的。 3.现在输入pip install opencv-python …
阅读更多...

cv2.error: OpenCV(4.1.0) C:\projects\opencv-python\opencv\modules\highgui\src\window.cpp:352: error

Error描述 C:\WORK\Python\python.exe C:/WORK/Python/EXAMPLE/ceshi.py Traceback (most recent call last):File "C:/WORK/Python/EXAMPLE/ceshi.py", line 3, in <module>cv2.imshow("1",img) cv2.error: OpenCV(4.1.0) C:\projects\opencv-pyth…
阅读更多...

QT多线程-应对复杂数据处理、串口数据实时显示

为何要使用多线程 任何收发两端速度不一致的通讯，都需要在它们之间使用一个足够大的FIFO缓冲区。 对任何FIFO缓冲区的使用，都需要仔细考虑接收端接收时超时无数据和发送端发送时FIFO缓冲区已满这两种情况下该如何做。 这些 经典代码还包括以下必须考虑的因素： ◆跨Windows和…
阅读更多...

QT-Qcustomplot-简单配置和基础坐标轴功能实现-（实时曲线、坐标轴可拖动、放大、缩小）

已经放弃Chart，太麻烦，难顶，效果也不太好，代码也繁琐 配置 1、官网下载：http://www.qcustomplot.com/ 下载压缩文件即可，然后将其中的qcustomplot.cpp和qcustomplot.h文件拿出添加到自己的项目中就行咯，pro文件记得添加代码或自动添加 2、安装帮助文档：F1即可查看，与…
阅读更多...
最新文章

Copyright @ 2022~2023