js 창 효과 실현

3164 단어 js탄창
본고의 실례는 여러분에게 js가 탄창 효과를 실현하는 구체적인 코드를 공유하여 참고하도록 하였으며, 구체적인 내용은 다음과 같다.
생각:
1. 버튼을 만들고 팝업 창을 클릭
2. 탄창 페이지 고정 위치 설정 기본 숨기기
3. 탄창 내용을 탄창 페이지 중간에 놓기
4. js 이벤트 연결 단추, 클릭 후 창 페이지 보이기
5.js 이벤트 귀속span 탭, 클릭 후 탄창 페이지 사라짐
코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> </title>
 <link href="../css/ .css" type="text/css" rel="stylesheet">
</head>
<body>
<!-- -->
<button id="btn"> </button>
<!-- -->
<div id="myModal">
 <!-- -->
 <div class="modal">
 <div class="modal-header">
  <p> </p>
  <span class="close">&times;</span>
 </div>
 <!-- -->
 <div class="modal-content">
  <p> </p>
</div>
  <!-- -->
  <div class="modal-footer">
  </div>
 </div>

  <script src="../js/ .js">
   </script>
</body>
</html>
CSS:

#myModal{
 display: none;
 position: fixed;
 z-index:1;
 left:0;
 top:0;
 width: 100%;
 height:100%;
 overflow: auto;
 background:rgba(0,0,0,0.5);
}
#myModal .modal{
 width: 500px;
 height:300px;
 position: relative;
 top:50%;
 left:50%;
 margin-top: -150px;
 margin-left: -250px;
 animation:animate 1s;
}
.modal .modal-header{
 height:50px;
 background:white;
 color: #000;
 line-height:50px;
 border-bottom: 1px solid #000000;
}
.modal .modal-header p{
 display: inline-block;
 margin:0;
 position: absolute;
 left: 20px;
}
.modal .modal-header .close{
 position: absolute;
 right:20px;
 font-size: 20px;
 cursor:pointer;
}
.modal .modal-content{
 background: white;
 height:200px;
 text-align: center;
 line-height: 200px;
}
.modal .modal-content p{
 margin:0;
}
.modal .modal-footer{
 position: relative;
 height:50px;
 background: white;
}
/* */
@keyframes animate{
 from{top:0;opacity:0}
 to{top:50%;opacity:1}
}
js:

window.onload=function () {
 // 
 var btn=document.getElementById("btn");
 var close=document.getElementsByClassName("close")[0];
 var myModal=document.getElementById("myModal");
 // 
 btn.onclick=function () {
  // 

  myModal.style.display="block";
 }
 close.onclick=function () {
  myModal.style.display="none";
 }
 // 
 window.onclick=function (event) {
  if(event.target ==myModal){
   myModal.style.display="none";
  }
 }
}
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.
백준 동전 모음
[web] Cookie & Session

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage