quilt code

[spring] 모달 본문

daily/SPRING

[spring] 모달

김뱅쇼 2023. 5. 22. 21:05

남들 다 하는데 나만 못했던 모달창 띄우기....

이렇게 팝업처럼 뜨는 창

 

https://adminlte.io/themes/v3/index3.html

admin lte에서 적당한 코드 훔쳐오기 (검색에 modal 검색)

 


코드)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!--  모달창 띄우기-->
<div class="modal fade" id="modalMember" style="display: none;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">회원정보</h4>
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 내용 넣기 시작 -->
 
                <div class="card card-success">
                    <div class="card-header">
                        <h3 class="card-title" id="modalTitleMemName">${principal.memberVO.memName}</h3>
                    </div>
                    <div class="card-body">
                        <input class="form-control form-control-lg" type="text" id="modalMemId"
                            placeholder="회원아이디 " value="${principal.memberVO.memId}"> <br /> 
                        <input class="form-control" type="text" id="modalMemName" 
                            placeholder="회원이름" value="${principal.memberVO.memName}"> <br /> 
                        <!-- principal.memberVO.memberAuthVOList : List<MemberAuthVO> -->
                        <c:set var="auth" value="" />
                        <c:set var="memberAuthVOList" value="${principal.memberVO.memberAuthVOList}" />
                        <c:forEach var="memberAuthVO" items="${memberAuthVOList}" varStatus="stat">
                            <!-- var="sum" value="달러{sum+값}" -->
                            <c:set var="auth" value="${auth += ' ' += memberAuthVO.auth}" />
                        </c:forEach>
                        <input class="form-control form-control-sm" type="text" id="modalAuth"
                            placeholder="권한정보" value="${auth}" />
                        <img src="/resources/upload/${principal.memberVO.memImg}" id="modalMemImg" class="img-fluid mb-2" />
 
                    </div>
                </div>
                <!-- 내용 넣기 끝 -->
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
 cs

스크립트 위에 대충 알아서 잘 작성해주면 됨....

data-toggle : modal에 트리거를 걸 때 씀.  data-toggle에 옵션을 걸어서 모달창을 띄울 수 있음!!!

모달에 트리거를 거는 방법은 a 태그, button, element가 있다

 

참고 블로그: https://velog.io/@skaus458/bootstrap-modal-%EC%82%AC%EC%9A%A9%EB%B2%95

 

bootstrap modal 사용법

modal에 트리거를 거는 방법은 두 가지가 있다.a 태그나 button 혹은 다른 element에 data-toggle, data-target 옵션을 걸어 띄워 모달창을 띄울 수 있다.modal창의 id는 "myModal"이다.<button class="btn-

velog.io

 

 

principal은 뭐더라.... 

어딘가에 적었겠지? 하지만 기억 안남 -> 바로 다음글에 써있음

 

 

 

'daily > SPRING' 카테고리의 다른 글

[spring] 오늘의 에러  (0) 2023.05.23
[spring] csrf  (0) 2023.05.22
[spring] 스프링 시큐리티  (0) 2023.05.22
[spring] 오늘의 에러  (0) 2023.05.22
[spring] 스프링 시큐리티에서 submit할 때  (0) 2023.05.22
'daily/SPRING' Related Articles more