안녕하세요. 명월입니다.
이 글은 Jquery의 Dialog에 대한 설명입니다.
Javascript에서 알람 창이라고 하면 alert();으로 작성하는 팝업이 있습니다. 이 팝업은 웹 상의 레이아웃은 아니고 브라우져의 모달로 된 새로운 윈도우 창입니다.
Jquery에서는 이런 새로운 알람창이 아닌 웹의 레이아웃으로 만들어진 dialog 팝업창을 제공하고 있습니다.
링크 - https://jqueryui.com/dialog
Jquery에서 제공하는 jquery는 html 태그 영역에 div를 만들어서 그 element에 dialog를 걸어서 만드는 방법으로 소개하고 있습니다.
제가 약간 기능을 추가해서 따로 html영역이 필요없이 사용할 수 있도록 만들었습니다 아래의 경로를 참고하면 됩니다.
링크 - https://github.com/nowonbun/Loader/blob/master/dialog.js
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- jquery UI CDN -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<button class="dialog-test-btn">click!</button>
<!-- jquery CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- jquery UI CDN -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- dialog 라이브러리 -->
<script type="text/javascript" src="https://nowonbun.github.io/Loader/dialog.js"></script>
<script>
$(function(){
// 옵션을 설정한다.
dialog.set({
// 다이얼로그가 show될 때의 액션 설정
show: {
effect: "blind",
duration: 1000
},
// 다이얼로그가 hide될 때의 액션 설정
hide: {
effect: "explode",
duration: 1000
},
// 타이틀 설정
title: "hello world",
// 모달 여부
modal: true,
// 버튼 설정
buttons: {
OK: function() {
dialog.close();
},
Cancel: function() {
dialog.close();
},
Custom: function(){
dialog.close();
}
}
});
$(".dialog-test-btn").on("click", function(){
// 다이얼로그를 연다.
dialog.open("<p>hello world</p>");
});
});
</script>
</body>
</html>
예제
dialog.js는 제가 만든 라이브러리입니다. 마음대로 수정 또는 배포해도 상관없습니다. 다만, 가능하면 출처만 남겨주세요.
여기까지 Jquery의 Dialog에 대한 설명이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Development note > Javascript, JQuery, CSS' 카테고리의 다른 글
| [Javascript] 팝업 라이브러리(bootbox) (0) | 2019.11.04 |
|---|---|
| [Javascript] 접속 브라우져를 확인하는 방법 (0) | 2019.11.02 |
| [Javascript] Html에서 javascript 또는 css 파일등을 동적으로 로드하는 방법 (0) | 2019.11.01 |
| [Jquery] Sortable(마우스 드래그 앤 드롭으로 리스트 정렬) (0) | 2019.10.24 |
| [Jquery] 달력 라이브러리 Datepicker (0) | 2019.10.21 |
| [Jquery] CSS로 작성 된 loader 마크 (0) | 2019.10.16 |
| [Jquery] ajax 함수 사용 방법 (2) | 2019.10.16 |
| [Javascript] window.history (0) | 2019.09.02 |