[JavaScript] 자바스크립트 동적 모달 창 만들기

---

 

시간이 많이 없으므로 진짜 간략한

 

모달창을 만들었음으로..

 

더 멋있는 모달창을 만들고 싶으신분은...

 

창의적으로 더 만들어보시길 권장합니다...ㅎㅎ..

---

 

Method

 

 

 

 

일단 모달 스타일은 다음 처럼 잡았습니다.

 

 

.jsp에는 뭐 따로 추가 해준것은 없습니다.

 

 

 

js

 

 

	const modalButton = document.createElement('button');
	const modalContent = document.createElement('ul');

	modalButton.innerHTML = '회원가입';
	
	modalContent.innerHTML += `
		<ul class='modalStyle'>
			<li>정말로 회원가입 하시겠습니까?</li>
		</ul>
	`;

	modalContent.style.display = 'none';
	
	const openModal = () => {
		modalButton.classList.toggle('on');
		modalButton.classList.contains('on') ? modalContent.style.display = 'block' : modalContent.style.display = 'none';

	}
	
	document.body.append(modalContent);
	document.body.append(modalButton);
		
		
	
	document.addEventListener('click', openModal);

 

 

 

다음과  같은 원리로 작동한다고 보면되겠다.

 

 

 

---

Result

 

 

 

회원가입 클릭 시

 

 

 

 

모달이 정상적으로 잘 작동한다.

 

 

 

 

---

 

 

 

To be continue..