반응형
Jquery Ui에는 Dialog가 있습니다.
Jquery에서 제공하는 Modal입니다.
Dialog에 버튼을 추가하는 방법과
버튼을 눌렀을 때 Callback을
받는 방법에 대해서
간단하게 예제 소스를 가지고
확인해보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.14.0-beta.2/jquery-ui.min.js"
integrity="sha256-E7PeZTkHU61hmvmEMwtUMgm9Aff574wswy5F1Y0oIRA="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.0-beta.2/themes/smoothness/jquery-ui.css">
<title>TEST</title>
</head>
<body>
<div id="dialog" title="title"></div>
<button onclick="test_open();">열기</button>
<script>
function test_dialog(callback) {
$('#dialog').dialog({
autoOpen: false, modal: true, width: 700, height: 700,
buttons: {
'확인': { text: '확인', click: function() { callback(true); $(this).dialog("close"); }, class: 'blue' },
'취소': { text: '취소', click: function() { callback(false); $(this).dialog("close"); }, class: 'red' }
}
});
$('#dialog').dialog('open');
}
function test_open() {
test_dialog(function callback(res) {
if (res) { console.log('확인'); }
else { console.log('취소'); }
});
}
</script>
</body>
</html>
위는 참고용 소스입니다.
dialog 안에 buttons에서
버튼을 추가할 수 있습니다.
click 이벤트에 callback을 담아
return 값으로 callback 처리를
하실 수 있습니다.
buttons에 버튼을 하나 추가하여
alert 형태로 사용하여도 되고,
위와 같이 두개를 추가하여
callback 처리로 구분하여
confirm 형태로 사용 가능합니다.
버튼 추가 방법은 dialog 안의 buttons
callback은 test_open function을
참고하시면 되겠습니다.
반응형
'Programing > JavaScript' 카테고리의 다른 글
| JavaScript 형변환 int to String or String to int (0) | 2024.07.11 |
|---|---|
| 태그에 특정 클래스 있는지 JavaScript에서 확인하는 방법 (0) | 2024.07.11 |
| [JavaScript] 배열에서 조건에 맞는 값만 추출하기! filter 함수 사용법 (0) | 2022.09.27 |
| [JavaScript] 문자열 구분자로 자르기 split (0) | 2022.09.23 |
| [JavaScript] 변수 타입 확인 방법 typeof (0) | 2022.09.23 |
댓글