[자바스크립트] 모달창 띄우는 간단한 방법.

프로젝트때(고기당) 진행했던 방법으로 설명해보자.

 

1. 어렵게 생각하지말고, 해당 화면에서 모달 레이어를 얹는것이라고 생각한다.

2. 그런데 이제, 모달 레이어는 일반 상황시에는 보이지 않도록 처리한다.

3. '작성'버튼을 누를때만 모달 레이어가 보이도록 한다.

 

포인트.

css에서 display를 none과 block을 사용함,

z-index를 주어서 모달 레이어가 가장 위의 레이어가 되도록 할것.

 

 

<!-- The Modal -->
<div id="myModal" class="modal">
	<!-- Modal content -->
	<div class="modal-content">
		<span class="close">&times;</span>                                                               
		<form name="noticeInsertForm">
			
			<h3>공지사항 작성</h3>
			<ol>
				<div class="modal-textbox">
				  	<div class="modal-textbox-s">
				    	<ts for="title">제목</ts>
				    	<td><input type="text" id="title" name="title"></td>
				    </div>
			    </div>
			    
			    <div class="modal-textbox">
				  	<div class="modal-textbox-ss"> 
				    	<ts for="content">공지내용</ts>
				    	<td><textarea id="content" name="content"></textarea></td>
				    </div>
			    </div>
			</ol>
			

			<div class="form-checkkkk">
				
			  	<button type="button" id="noticeInsertBtn" name="noticeInsertBtn" class="btn btn-lg btn-block btn-success">작성</button>	  	
			  	<br>
			</div>
			
		</form>
	</div>
</div>
<!-- modal END -->

 

아래는 스크립트 코드이다. 

모달부분만 옮겼다.

<script>

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById('write');

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];  

$(document).ready(function() {
	
	btn.onclick = function(event) {
	    modal.style.display = "block";
	}
	
	noticeList();
});


.
.
.
.
// When the user clicks on <span> (x), close the modal
span.onclick = function(event) {
	modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
	if (event.target == modal) {
		modal.style.display = "none";
	}
}
</script>

 

 

---

참고한 블로그.

kuzuro.blogspot.com/2018/09/blog-post.html

다른 방법. new93helloworld.tistory.com/135