JS로 구동시키는 방법
- html/css ui 만들기
- css 숨기기
- js로 다시 나타나게 하기
1. html/css ui 만들기
- 모달창 내용을 적어준다.
<div>
<h1>제목입니다</h1>
<p>내용입니다.</p>
<div>내용입니다.</div>
<div>내용입니다.</div>
<button>수정하기</button><br>
<button>삭제하기</button>
</div>
<div class="modalDiv">
<div class="bg"></div>
<div class="modal">
<p>정말 삭제하시겠습니까?</p>
<button>취소</button>
<button>삭제</button>
</div>
</div>2. Css 숨기기
- css에서 "modalDiv"를 숨겨준다.
이렇게 하면 모달창 UI는 끝.
3. JS로 나타나게 만들기
- html에서 "모달창열기" 이름의 함수 사용하여
js 스크립트를 작성해준다.
<body>
<div>
<h1>제목입니다</h1>
<p>내용입니다.</p>
<div>내용입니다.</div>
<div>내용입니다.</div>
<button>수정하기</button><br>
<button onclick="모달창열기()">삭제하기</button>
</div>
<div class="modalDiv">
<div class="bg"></div>
<div class="modal">
<p>정말 삭제하시겠습니까?</p>
<button>취소</button>
<button>삭제</button>
</div>
</div>
<script>
function 모달창열기(){
var 모달 = document.querySelector(".modalDiv");
모달.style.display ="block";
console.log(모달);
};
</script>
</body>Modal 창 숨기기는?
- html에서 "모달창닫기" 이름의 함수를 추가해준다
<body>
<div>
<h1>제목입니다</h1>
<p>내용입니다.</p>
<div>내용입니다.</div>
<div>내용입니다.</div>
<button>수정하기</button><br>
<button onclick="모달창열기()">삭제하기</button>
</div>
<div class="modalDiv">
<div class="bg" onclick="모달창닫기()"></div>
<div class="modal">
<p>정말 삭제하시겠습니까?</p>
<button onclick="모달창닫기()">취소</button>
<button>삭제</button>
</div>
</div>
<script>
function 모달창열기(){
var 모달 = document.querySelector(".modalDiv");
모달.style.display ="block";
console.log(모달);
};
function 모달창닫기(){
var 모달 = document.querySelector(".modalDiv");
모달.style.display ="none";
console.log(모달);
};
</script>인자 추가하기
코드의 function 부분은 중복되는 코드가 존재한다.
인자를 사용하여 중복되는 코드를 줄여줄 수 있다.
<div>
<h1>제목입니다</h1>
<p>내용입니다.</p>
<div>내용입니다.</div>
<div>내용입니다.</div>
<button>수정하기</button><br>
<button onclick="모달창열고닫기('block')">삭제하기</button>
</div>
<div class="modalDiv">
<div class="bg" onclick="모달창열고닫기('none')"></div>
<div class="modal">
<p>정말 삭제하시겠습니까?</p>
<button onclick="모달창열고닫기('none')">취소</button>
<button>삭제</button>
</div>
</div>
<script>
function 모달창열고닫기(인자) {
var 모달 = document.querySelector(".modalDiv");
모달.style.display = 인자;
}
</script>