[Spring] 쇼핑몰 - 9 부트스트랩 문법 hide.bs.modal 적용

Bootstrap은 모달이 켜지거나 꺼질때 자동으로 값이 ' ' 이 되도록 해주는 기본적인 기능이 있다.

header에 login 모달 창을보면 아이디와 비밀번호 input 박스에 값을 넣고 끄고 다시 들어와도 똑같이 채워져있다.

 

BootStrap

 

hide.bs.modal이란, 인스턴스 숨기기 메서드가 호출되면 즉시 시작되는 이벤트이다.

 위 함수를 한번 해보기 위해 header의 자바스크립트를 하나 만들어주자.

html에서 loginModal 이라는 id 값에 담긴 데이터를 js로 가지고 온 뒤 loginModal 이라고 저장한다.

어떤 데이터를 가지고 올지는 아래 html에서 확인해보자.

header.html

form태그에 id를 만들자.

 

user_layout이 열리면 어차피 header도 함께 열리니 user_layout에다가 js를 연동해주자. admin_layout에도 똑같이 해주자.

 

이렇게하면 user_layout과 admin_layout 둘다 header.html이 적용되면서 login과 join 폼이 뜰 것이다.

다음 포스팅에서는 회원가입 기능에 대해서 자세하게 포스팅해볼 것이다.