[CodingApple] 모달창 띄우기 / jQuery

Nadia·2024년 2월 20일

CodingApple

목록 보기

3/20

jQuery

: JS의 라이브러리
https://releases.jquery.com/

JS 간단히 사용 가능
간단한 UI 애니메이션이 편리함
모든 JS 라이브러리는 <body> 태그가 끝나기 전에 위치하는게 좋음

jQuery 구문 밑에서부터 jQuery 사용 가능

<script
	src="https://code.jquery.com/jquery-3.7.1.min.js"
	integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
	crossorigin="anonymous"
></script>

jQuery와 JS는 혼용이 불가능!
- jQuery는 jQerry로만, JS는 JS로만 써야 함

(X)
$('#id').on('click', function(){
  $('.hello.').innerHTML(); // 불가능!
  // $는 jQuery, innerHTML은 Javascript
})

내부 글자 변경

$(.class / #id) : querySelector / querySelectorAll
.html() : innerHTML

//<p> 태그의 '안녕'을 '바보'로 변경하기
  1. class로 가져오기
	document.getElementsByClassName("hello")[0].innerHTML = "바보";

  2. querySelector로 가져오기
	document.querySelector(".hello").innerHTML = "바보";

  3. jQuery
	$(".hello").html("바보");

내부 글자 일괄 변경

// '안녕' 3개를 전부 '바보'로 바꾸기
<p class="hello">안녕</p>
<p class="hello">안녕</p>
<p class="hello">안녕</p>

$(".hello").html("바보");
// $ => querySelectorAll 기능, 클래스가 hello인 구문을 다 가져옴

내부 스타일 변경

.css() : html에 css 넣기 (인라인 방식)

$(".hello").css("color", "red");

class 탈부착

.addClass() : 클래스 추가
.removeClass() : 제거
.toggleClass() : 토글

$(".hello").addClass("show");
$(".hello").removeClass("show");
$(".hello").toggleClass("show");

event 사용

on : addEventListener

// addEventListener
$('#id').on('click', function(){
})

UI 애니메이션

.hide() : disply : none;
.slideUp() : 서서히 닫힘 (사라짐)
.slideDown() : 서서히 열림
.slideToggle() : 서서히 열림 & 한번 더 누르면 서서히 닫힘

$("#test-btn").on("click", function () {
   	 $(".hello").hide();
 	 $(".hello").slideUp();
 	 $(".hello").slideDown();
 	 $(".hello").slideToggle();
});

버튼을 누르면 모달창 띄우기

버튼, 모달창 UI 생성 (html, css)
행동 구현 (js)
1. '로그인' 버튼 누르면 모달창 띄우기
2. '닫기' 버튼 누르면 모달창 닫기

JS 방식

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="main.css" rel="stylesheet" />
    <title>Hello, world!</title>
  </head>
  <body>
    <!--모달창 html, css-->
    <div class="black-bg">
      <div class="white-bg">
        <h4>로그인하세요</h4>
        <button class="btn btn-danger" id="close">닫기</button>
      </div>
    </div>

    <button id="login">로그인</button>

    <script>
        document.getElementById("login").addEventListener("click", function () {
            document.querySelector('.black-bg').classList.add('show-modal');
        });
        document.getElementById("close").addEventListener("click", function () {
            document.querySelector('.black-bg').classList.remove('show-modal');
        });
    </script>
  </body>
</html>

css파일
.black-bg {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    z-index: 5;
    padding: 30px;
    display: none;
  }
  .white-bg {
    background: white;
    border-radius: 5px;
    padding: 30px;
  }

.show-modal {
    display: block;
}

jQuery 방식

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="a.css" rel="stylesheet" />
    <title>Hello, world!</title>
  </head>
  <body>
    <!--모달창 html, css-->
    <div class="black-bg">
      <div class="white-bg">
        <h4>로그인하세요</h4>
        <button class="btn btn-danger" id="close">닫기</button>
      </div>
    </div>

    <!--jQuery 구문-->
    <script
      src="https://code.jquery.com/jquery-3.7.1.min.js"
      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
      crossorigin="anonymous"
    ></script>

    <button id="btn">로그인</button>

    <script>
      $(".black-bg").hide();
      $("#btn").on("click", function () {
        $(".black-bg").slideDown();
      });
      $("#close").on("click", function () {
        $(".black-bg").slideUp();
      });
    </script>
  </body>
</html>

css 파일
.black-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  z-index: 5;
  padding: 30px;
}
.white-bg {
  background: white;
  border-radius: 5px;
  padding: 30px;
}