- html/css ui 만들기
- css 숨기기
- js로 다시 나타나게 하기
<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>
이렇게 하면 모달창 UI는 끝.
<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>
<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>