모달 :: 췐틀맨 devlog

모달

2024년 11월 04일

chantleman
작성자
2024.11.04.:13

모달 띄우기

기본

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
<!--모달 별도로 만들기-->
    <div id="jhModal" onclick="mclose()">  <!--여기에 mclose()를 하면 모달 바깥쪽 클릭했을때 모달 나가기-->
        <div id="jcCont">
            <h1>ㅎㅇ</h1>
            <h2>반가옹</h2>
            <button onclick="mclose()">누르면 닫힐껄</button>
        </div>
    </div>
<!--모달 끝-->

    <div id="wrapper">
        <h1>췐틀맨 만만세</h1> 
        <button onclick="mopen()">열려라 췐틀</button> 
    </div>
</body>
</html>

<script>
   const amodal = document.querySelector("#jhModal");
   function mopen(){
        amodal.style.display="block";
    }

    function mclose(){
        amodal.style.display="none";
    }
</script>

이렇게 하면 잘 실행되는데

주의할 점!!

mopen(), mclose() 대신 open(), close()로 하면

f12 눌러도 에러도 안뜨궁

elements에 소스도 다 사라져있음!!

↓ ↓ ↓

open(), close()는 window 메소드라 새로운 윈도우가 열려버려서 open, close 예약어로 함수명 지정하면 안됨

다른 방법

(같은 메소드로 사용하기)

<body>
<!--모달 별도로 만들기-->
    <div id="jhModal">
        <div id="jcCont">
            <h1>ㅎㅇ</h1>
            <h2>반가옹</h2>
            <button onclick="toggle()">누르면 닫힐껄</button>
        </div>
    </div>
<!--모달 끝-->

    <div id="wrapper">
        <h1>췐틀맨 만만세</h1> 
        <button onclick="toggle()">열려라 췐틀</button> 
    </div>
</body>

모달 열고 닫는 함수명을 둘 다 toggle()로 하고, innerText로 구분하기

function toggle(){
    if(event.target.innerText == "열려라 췐틀") modal.style.display="block";
    if(event.target.innerText == "누르면 닫힐껄") modal.style.display="none";
}

<style>
    #wrapper{
        border:5px groove gold;
        width:70%;
        height:50vh;
        margin: 10% auto; /*auto 하면 가운데로 이동*/
    }
    #jhModal{
        position:fixed; /*무조건 화면 전체를 막아야함*/
        width:100%;
        height:100%;
        left:0; top:0;
        display:none;
        background-color: rgba(255, 128, 128, 0.7);
    }
    #jcCont{
        width:50%;
        margin:20px auto;
        background-color:blueviolet;
    }
</style>

https://chantleman.tistory.com/entry/BOM-DOM

BOM, DOM

BOM 브라우저 객체 모델 - 최상위 객체는 window- 전역 객체- 모든 객체가 소속된 객체 window에 속하는 하위 객체location : url에 대한 정보 제공history : 방문 기록 정보 제공document: domnavigator: 브라우

chantleman.tistory.com

팝업창

function mclose(){
    amodal.style.display="none";
    window.open("https://ddit.or.kr","so","width=400, height=500, left=300, top=300");
}

이렇게 하면 새로운 윈도우 창 (팝업창)이 뜸

728x90

'js' 카테고리의 다른 글

개발자가 자주 쓰는 스타일 (2)	2024.11.13
eclipse에서 vscode 열기 (0)	2024.11.11
json parse (2)	2024.10.31
비동기 ajax, fetch, axios, async/await, promise (0)	2024.10.29
localStorage (0)	2024.10.23

다음 글이 없습니다.

이전 글이 없습니다.

모달 띄우기

다른 방법

팝업창

'js' 카테고리의 다른 글

티스토리툴바