https://craftpip.github.io/jquery-confirm/
jquery-confirm.js | The multipurpose alert & confirm
A multipurpose alert & confirm plugin, alternative to the native alert() and confirm() functions. Supports features like auto-close, themes, animations, and more.
craftpip.github.io
jquery-confirm-v3.3.4.zip
0.84MB
설명보다는 사이트에 한번 가서 직접 보는것이 빠르다.
위 사이트에는 여러가지 기능들에 대한 도움말이 있지만, 샘플로 Alert 과 Confirm 을 작성 하였다.
아래 코드를 jsfiddle 의 html 영역에 복사하여 넣고 테스트 해 보면 된다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>
<script>
/* 테이블에 데이터 넣기 */
function appendData() {
$.ajax({
url: 'https://jsonplaceholder.typicode.com/posts',
success: function (data) {
var html = '';
for (let i = 0; i < data.length; i++) {
html += '<tr><td>' + data[i].id + '</td><td>' + data[i].title + '</td><td>' + data[i].body + '</td></tr>';
}
$('#tbody').html('').html(html);
html = null;
}
});
}
/* Alert 샘플*/
function alertSample() {
$.alert({
title: '경고!',
content: 'Alert 샘플입니다.',
theme: 'dark',
});
}
/* Confirm 샘플 */
function confirmSample() {
$.confirm({
title: '진행 확인!',
content: '데이터를 불러 오시겠습니까?',
buttons: {
ok: {
text: 'OK',
btnClass: 'btn-blue',
keys: ['enter', 'shift'],
action: function(){
appendData();
}
},
cancel: function () {
$.alert('취소 되었습니다!');
}
}
});
}
</script>
</head>
<body>
<div class="col-md-8">
<button class="btn btn-sm btn-primary" onclick="alertSample();">Alert</button> | <button class="btn btn-sm btn-primary" onclick="confirmSample();">Confirm</button>
<br/>
<br/>
<table class="table table-dark">
<thead>
<tr>
<th>ID</th>
<th>타이틀</th>
<th>바디</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
</body>
</html>'Web > JS & jQuery' 카테고리의 다른 글
| JS와 jQuery 를 사용한 모듈화 (0) | 2024.09.26 |
|---|---|
| 유효성 검사 (1) | 2024.09.03 |
| String.Format, String.IsNullOrEmpty, String.IsNullOrWhiteSpace (0) | 2024.08.30 |
| FAKE Ajax JSON 데이터가 필요할 때 jsonplaceholder (0) | 2024.08.30 |
| JavaScript 에서 StringBuilder 를 사용해 보자 (0) | 2024.08.29 |