이번에는 부트스트랩을 이용하여 모달창(일명 : 레이어팝업)을 띄워보도록 하겠습니다.
모달창 출력은 "html 속성변경", "jquery를 이용한 출력"
이 2가지 방법으로 모달을 실행화면에 출력을 시킬수가 있습니다.
제일 먼저 html속성값만을 이용하여 모달창을 실행해보도록 하겠습니다.
HTML코드를 이용하여 모달 띄우기
<button class="btn btn-default" data-target="#layerpop" data-toggle="modal">모달출력버튼</button><br/>
<div class="modal fade" id="layerpop" >
<div class="modal-dialog">
<div class="modal-content">
<!-- header -->
<div class="modal-header">
<!-- 닫기(x) 버튼 -->
<button type="button" class="close" data-dismiss="modal">×</button>
<!-- header title -->
<h4 class="modal-title">Header</h4>
</div>
<!-- body -->
<div class="modal-body">
Body
</div>
<!-- Footer -->
<div class="modal-footer">
Footer
<button type="button" class="btn btn-default" data-dismiss="modal">닫기</button>
</div>
</div>
</div>
</div>
위 코드 실행하기전 모달 띄우는데 필수적인 속성은 버튼태그의 경우
data-target속성과 data-toggle속성입니다.
data-target의 value는 버튼 클릭 시 모달로 띄우고자하는
id값을 #을 붙여서 연결을 해주는 것입니다.
data-toggle의 value는 모달기능을 수행하겠다는 의미입니다.
그리고 모달창 영역에 버튼태그의 data-dismiss 속성을 적용하면 모달을 닫게하는 기능을 적용하겠다라는 의미입니다.
실행결과
위 코드를 실행하게 된다면 부드럽게 모달창이 띄어질 것입니다.
이유는 모달레이어의 클래스 부분을 보면 class속성에 "fade"라는 클래스가 추가되었기 때문입니다.
해당 클래스를 지우게 된다면 모달의 show/hide기능이 딱딱하게 보여질 것입니다
jQuery를 이용하여 모달띄우기
jquery를 이용하여 모달을 띄울경우 상단에 작성했던 html 코드를 수정하도록 하겠습니다.
모달 출력버튼에서 data-target / data-toggle 속성이 필요가 없습니다.
과감히 삭제~
그리고 삭제 된 버튼 태그에 id속성을 추가하도록 하겠습니다.
저는 버튼태그의 id="popbutton" 라고 주었습니다.
이어서 jquery 를 이용하여 버튼클릭시 모달창을 띄우는 코드는 다음과 같습니다.
버튼 클릭 모달띄우는 jquery 코드
$(function(){
$("#popbutton").click(function(){
$('div.modal').modal();
})
})
위와 같이 정해주면 정상적으로 일반 HTML 실행결과와 동일하게 나올것입니다.
마지막으로 비동기 방식인 ajax call을 하여 모달을 띄워보도록 해보겠습니다.
이방식 역시 기존 코드를 이용하여 적용해보도록 하겠습니다.
버튼 클릭시 적용해준 modal() 함수를 하단과 같이 변경해주도록 합니다.
$(function(){
$("#popbutton").click(function(){
$('div.modal').modal({
remote : 'layer.html'
});
})
})
기존 modal 함수에 추가 속성으로 remote를 주어
modal창에 보여줄 페이지를 layer.html에 기술하도록 합니다.
layer.html내에는 기존에 작성되었던 modal 레이아웃중 class="modal-content" 내에
정의했던 코드를 복사하여 붙여놓고 실행을 해보도록 하겠습니다.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
$("#popbutton").click(function(){
$('div.modal').modal({remote : 'layer.html'});
})
})
</script>
</head>
<body>
<button class="btn btn-default" id="popbutton">모달출력버튼</button><br/>
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- remote ajax call이 되는영역 -->
</div>
</div>
</div>
</body>
</html>
layer.html
<!-- header --> <div class="modal-header"> <!-- 닫기(x) 버튼 --> <button type="button" class="close" data-dismiss="modal">×</button> <!-- header title --> <h4 class="modal-title">Header</h4> </div> <!-- body --> <div class="modal-body"> Body </div> <!-- Footer --> <div class="modal-footer"> Footer <button type="button" class="btn btn-default" data-dismiss="modal">닫기</button> </div>
페이지별 코드작성 후 실행을 하게되면
기존 실행결과들과 동일하게 나올것입니다.
by 개발로짜
'웹개발강좌 > 부트스트랩' 카테고리의 다른 글
| 부트스트랩 7장 - 탭기능을 적용하여 내용의 가독성 높이기 (0) | 2014.10.24 |
|---|---|
| 부트스트랩 6장 - 스크롤스파이 기능을 이용하여 메뉴포커스 변경해보기 (0) | 2014.10.22 |
| 부트스트랩 4장 - 부트스트랩을 이용하여 드롭다운 메뉴 생성하기 (2) | 2014.10.14 |
| 부트스트랩 3장 - 다양한 버튼 컴포넌트를 만들어보자 (그룹버튼 편) (0) | 2014.10.09 |
| 부트스트랩 2장 - 다양한 버튼 컴포넌트를 만들어보자 (색상 및 크기 편) (0) | 2014.10.08 |