[Spring boot] Modal 적용 3가지 방법

spring boot

[Spring boot] Modal 적용 3가지 방법

blackzapato 2019. 12. 3. 02:04

Modal적용 3가지 방법

필요한 상황에 따라 사용하시면 될 거 같습니다.

bootstrap을 사용한다는 가정하에서의 2가지와

javascript만으로 만든 modal입니다.

우선은 bootstrap으로 만드는 간단한 방법입니다.

데이터를 넣지 않는 항상 똑같은 값을 가지고 있는 모달에서 사용하시면 됩니다.

1. 결과물

tables.jsp

 <!-- Moa Modal-->
  <div class="modal fade" id="moaModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Ready to test</h5>
          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">x</span>
          </button>
        </div>
        <div class="modal-body">
	        test
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary" type="button" data-dismiss="modal">Cancel</button>
        </div>
      </div>
    </div>
  </div>

jsp안 body 하단에 위치해줍시다.

<a class="dropdown-item" href="#" data-toggle="modal" data-target="#moaModal">
	<i class="fas fa-arrow-right"></i>
</a>

주의 사항은 a 태그에 data-target과 Moa Modal에 id를 맞춰야 합니다.

간단하죠~

두 번째입니다.

이번에는 jsp을 하나를 더 추가해줘서 내용만 따로 적는 방법입니다.

모달의 껍데기만 모달이 나올 본문에 위치하고

내용물만 따로 jsp로 만들어 다른곳에서 제어한다고 보시면 됩니다.

2. 결과물

moaModal.jsp (Modal 내용물)

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="" />
<!-- histoty Modal-->
<div class="modal-header">
    <h5 class="modal-title" id="historyModalLabel">ID - Modal</h5>
    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
</div>
<div class="modal-body">
    <div class="table-responsive">
        <div class="container">
        </div>
        <table class="table table-hover">
            <thead class="text-center">
            <tr class="content">
                <th class="text-center">
                    ID
                </th>
                <th class="text-center">
                    PassWord
                </th>
            </tr>
            </thead>
            <tbody class="text-center">
            <c:forEach items="${Moa}" var="Moa">
                <tr class="content" style="font-size: 12px;">
                    <td class="text-center">${Moa.id }</td>
                    <td class="text-center">${Moa.password}</td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>

</div>
<div class="modal-footer">
    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
</div>

tables.jsp (Modal이 위치할 본문)

/*모달*/
function fnModuleInfo(str){
   $('#MoaModal .modal-content').load("moaModal?id="+str);
   $('#MoaModal').modal();

}

<!-- Moa Modal Button -->
<a onclick="fnModuleInfo('${test.id}')">
	<i class="fa fa-arrow-circle-right fa-lg"></i>
</a>

<!-- Moa Modal-->
  <div class="modal fade" id="MoaModal" tabindex="-1" role="dialog" aria-labelledby="historyModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
    </div>
  </div>
</div>

back 쪽은 어떻게 만들어도 상관이 없고 취향에 따라 화면에 데이터만 보내 주면 됩니다.

저의 경우 model을 사용했습니다.

만들 당시만 해도 굉장히 헷갈렸는데 다시 살펴보니 별거 없었구나 싶습니다.

설명을 하자면 tables.jsp에서 버튼을 누르면 값이 onclick이벤트로 전달이 되고 전달된 값이

Controller로 넘어가서

MoaModal이란 아이디를 가진 태그에 후손 클래스. modal-content에 뿌려지게 되고

MoaModal의 모달이 화면에 띄워지게 됩니다.

마지막으로 javascript로만 만든 modal입니다.

3.결과물

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Modal</title>  
<style>
        #modal {
          display: none;
          position:relative;
          width:100%;
          height:100%;
          z-index:1;
        }
        
        #modal h2 {
          margin:0;
        }
        #modal button {
          display:inline-block;
          width:100px;
          margin-left:calc(100% - 100px - 10px);
        }
        
        #modal .modal_content {
          width:300px;
          margin:100px auto;
          padding:20px 10px;
          background:#fff;
          border:2px solid #666;
        }
        
        #modal .modal_layer {
          position:fixed;
          top:0;
          left:0;
          width:100%;
          height:100%;
          background:rgba(0, 0, 0, 0.5);
          z-index:-1;
        }   
</style> 
</head>
<body>

<div id="root">
   
    <button type="button" id="modal_opne_btn">모달 창 열기</button>
       
</div>

<div id="modal">
   
    <div class="modal_content">
        <h2>모달 창</h2>
       
        <p>모달 창 입니다.</p>
       
        <button type="button" id="modal_close_btn">모달 창 닫기</button>
       
    </div>
   
    <div class="modal_layer"></div>
</div>
<script>
    document.getElementById("modal_opne_btn").onclick = function() {
        document.getElementById("modal").style.display="block";
    }
   
    document.getElementById("modal_close_btn").onclick = function() {
        document.getElementById("modal").style.display="none";
    }   
</script>
</body>
</html>

인터넷 찾아가며 혼자 만들어 보다가 더 좋은 예제가 있어 가져왔습니다.

퍼온 글을 정리 하자면

버튼을 통해 이벤트가 발생하면

id가 modal인 것의 style이 변경되고 modal div안에

modal_layer가(불투명한 검은색배경) z-index 속성으로 인해 뒤에 배치되게 됩니다.

또한 z-index로 인해 modal_content는 앞에 배치되어 위의 이미지와 같은 결과물이 만들어집니다.

* (z-index는 숫자가 낮을수록 뒤에 배치되는 속성, background : rgba는 불투명색상을 나타냅니다.)

나에게 도움이 된 사이트

https://api.jquery.com/load/

.load() | jQuery API Documentation

Description: Load data from the server and place the returned HTML into the matched elements. Note: Prior to jQuery 3.0, the event handling suite also had a method named .load(). Older versions of jQuery determined which method to fire based on the set of

api.jquery.com

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

간단한 모달 레이어 만들기

개발자, 웹개발, PC앱개발, Java, C#, HTML/CSS, JavaScript, Spring, ASP, .NET

kuzuro.blogspot.com

'spring boot' 카테고리의 다른 글

[spring security] springboot에 가장 빠르게 적용해 보자[2] (0)	2020.03.24
[spring security] Request method 'POST' not supported 오류 (0)	2020.03.18
[Spring boot] mysql + mybatis 페이징 처리 방법 (6)	2019.12.02
[spring boot] bootstrap 템플릿적용 방법 (1)	2019.12.02
[Spring boot] eclipse 이용하여 mySQL + mybatis 연결방법 (0)	2019.12.01

현재글[Spring boot] Modal 적용 3가지 방법

기억 조각 모음 저장소