공통 팝업

  1. Home
  2. 시스템
  3. 팝업창
Modal

버튼을 클릭하여 모달 호출
data-target 속성과 modal id 값 매칭

Options

옵션은 data-attribute 또는 JavaScript로 전달
data-attribute를 사용하는 경우, 옵션 이름 앞에 data-를 붙여서 작성. 예: data-backdrop=""

Name Type Default Description
backdrop boolean 또는 문자열 'static' true 모달 뒤에 배경(backdrop) 요소를 포함한다.static 을 지정하면 배경을 클릭해도 모달이 닫히지 않는다.
keyboard boolean true Escape 키를 눌렀을 때 모달을 닫는다.
focus boolean true 모달이 초기화될 때 자동으로 모달에 포커스를 둔다.
show boolean true 모달이 초기화될 때 자동으로 모달을 표시한다.
Alert
SweetAlert는 브라우저 기본 alert()을 대체하는 라이브러리.

알림창은 화면 중앙에 표시되며 데스크탑, 모바일, 태블릿 환경에서도 일관된 UI를 제공한다.
또한 버튼 텍스트, 색상, 아이콘, 콜백 함수 등을 자유롭게 커스터마이징할 수 있다. http://t4t5.github.io/sweetalert/

기본 메시지

성공 메시지

확인/취소 버튼 포함 경고 메시지

취소 버튼 커스터마이징

코드 예시 (confirm 콜백 로직)

$('.demo3').click(function () {
    swal({
        title: "삭제하시겠습니까?",
        text: "삭제 후에는 복구할 수 없습니다.",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "확인",
        cancelButtonText: "취소",
        closeOnConfirm: false
    }, function () {
        swal("삭제 완료", "파일이 성공적으로 삭제되었습니다.", "success");
    });
});
© FuturenTech All Rights Reserved.