안녕하세요. 명월입니다.
이 글은 Javascript의 팝업 라이브러리 bootbox에 대한 글입니다.
이 전에 제가 팝업에 관한 라이브러리에 대한 글을 작성한 적이 있습니다.
Jquery 라이브러리의 dialog를 이용하는 방법이나 혹시 Bootstrap의 웹 디자인 템플릿을 사용한다고 한다면 Model의 라이브러리를 사용할 수 있습니다. 제 생각에는 이 라이브러리를 사용하는 것만으로도 충분하다고 생각하나 이 라이브러리를 사용하지 못하는 경우도 있을 수 있습니다.
이미 화면 디자인이 완성된 프로젝트인데 Bootstrap를 넣으면 디자인이 바뀐다던가 Jquery UI Library를 사용하면 기존의 javascript와 충돌(함수 명 혹은 변수명이 같아서?)이 나는 경우는 사용하지 못할 수도 있습니다.
그때 이용할 수 있는 라이브러리이지 않을까 싶습니다. 개인적으로는 간편해서 즐겨 사용합니다.
링크 - http://bootboxjs.com
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<!-- bootstrap cdn -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<!-- jquery cdn -->
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<!-- bootstrap cdn -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- bootbox cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.3.2/bootbox.min.js"></script>
</head>
<body>
<button id="alertEx">Alert Example</button><br />
<button id="confirmEx">Confirm Example</button><br />
<button id="promptEx">Prompt Example</button><br />
<button id="dialogEx">Dialog Example</button>
<script>
$(function(){
// alert
$("#alertEx").on("click", function(){
bootbox.alert("Alert Example", function(){
console.log("알람 callback");
});
});
// confirm
$("#confirmEx").on("click", function(){
bootbox.confirm("Confirm Example", function(){
console.log("confirm callback");
});
});
// prompt
$("#promptEx").on("click", function(){
bootbox.prompt("Prompt Example", function(result){
console.log("prompt callback - " + result);
});
});
// dialog
$("#dialogEx").on("click", function(){
bootbox.dialog({
title: 'Dialog Example',
message: 'TEST',
size: 'large',
//onEscape: true,
//backdrop: true,
buttons: {
A: {
label: 'A',
className: 'btn-primary',
callback: function(){
console.log("A dialog callback");
}
},
B: {
label: 'B',
className: 'btn-info',
callback: function(){
console.log("B dialog callback");
}
},
C: {
label: 'C',
className: 'btn-success',
callback: function(){
console.log("C dialog callback");
}
},
D: {
label: 'D',
className: 'btn-danger',
callback: function(){
console.log("D dialog callback");
}
}
}
});
});
});
</script>
</body>
</html>
예제
처음에는 bootstrap과 jquery를 독립한 dialog를 생성하기 위한 줄 알았는데 결국은 jquery와 bootstrap이 필요하군요.
dialog를 사용하기는 좀 많이 편해지기는 합니다만, 독립성이 없으니깐 무언가 많이 부족하네요.
여기까지 Javascript의 팝업 라이브러리 bootbox에 관한 내용였습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Development note > Javascript, JQuery, CSS' 카테고리의 다른 글
| [Javascript] Html태그로 파일 다운로드(base64)를 하는 방법 (0) | 2019.11.23 |
|---|---|
| [Javascript] 서명 마크(sign)를 만드는 방법(canvas태크) (4) | 2019.11.14 |
| [Jquery] $.cookie 사용법 (0) | 2019.11.12 |
| [CSS] 반응형 웹을 만들기 위한 브라우저 사이즈별 css 적용 방법 (0) | 2019.11.05 |
| [Javascript] 접속 브라우져를 확인하는 방법 (0) | 2019.11.02 |
| [Javascript] Html에서 javascript 또는 css 파일등을 동적으로 로드하는 방법 (0) | 2019.11.01 |
| [Jquery] Sortable(마우스 드래그 앤 드롭으로 리스트 정렬) (0) | 2019.10.24 |
| [Jquery] 다이얼로그 Dialog (0) | 2019.10.23 |