JS+CSS 전체 회색, 검은색, 투명 마스크 효과를 내보내는 방법
많은 사이트에서 이런 효과가 있다. 일정한 조작을 한 후에 회색과 검은색의 반투명 마스크가 튀어나온다. 그 위에 지정된 내용을 조작할 수 있다. 예를 들어 로그인 상자를 튀길 수 있는 것과 같은 내용을 조작할 수 있다. 다음은 어떻게 이런 효과를 실현하는지 소개한다. 코드 실례는 다음과 같다.
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.net/" />
<title>CSS - </title>
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
.zhezhao
{
width:100%;
height:100%;
background-color:#000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
position:absolute;
left:0px;
top:0px;
display:none;
z-index:1000;
}
.login
{
width:280px;
height:180px;
position:absolute;
top:200px;
left:50%;
background-color:#000;
margin-left:-140px;
display:none;
z-index:1500;
}
.content
{
margin-top:50px;
color:red;
line-height:200px;
height:200px;
text-align:center;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var zhezhao=document.getElementById("zhezhao");
var login=document.getElementById("login");
var bt=document.getElementById("bt");
var btclose=document.getElementById("btclose");
bt.onclick=function()
{
zhezhao.style.display="block";
login.style.display="block";
}
btclose.onclick=function()
{
zhezhao.style.display="none";
login.style.display="none";
}
}
</script>
</head>
<body>
<div class="zhezhao" id="zhezhao"></div>
<div class="login" id="login"><button id="btclose"> </button></div>
<div class="content"> ，<button id="bt"> </button></div>
</body>
</html>실현 원리:
전체 화면의div를 만들고 절대 포지셔닝을 사용하면 문서 흐름에서 벗어나 다른 요소에 영향을 주지 않고 반투명 상태로 설정할 수 있습니다. 물론 이 투명도는 마음대로 조정할 수 있고login 요소를 만들 수 있습니다. 또한 절대 포지셔닝을 사용하고 z-index 속성 값을 화면의div보다 크면 전체 화면div로 덮이지 않습니다.기본 상태에서 이 두 div의display 속성 값은none입니다.상응하는 단추를 누르면 디스플레이의 속성 값을 변경할 수 있습니다.
건의: 가능한 한 손으로 쓴 코드를 사용하면 학습 효율과 깊이를 효과적으로 높일 수 있다.
본고에서 기술한 것이 여러분의 웹 프로그램 설계에 도움이 되기를 바랍니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JS 판단 수조 네 가지 실현 방법 상세그러면 본고는 주로 몇 가지 판단 방식과 방식 판단의 원리를 바탕으로 문제가 있는지 토론하고자 한다. 예를 들어 html에 여러 개의 iframe 대상이 있으면 instanceof의 검증 결과가 기대에 부합되지 않을...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
