[javascript] SweetAlert와 페이지 스크롤 기능
웹 페이지에서 팝업창을 사용할 때에는 SweetAlert를 사용하면 예쁜 디자인의 팝업창을 간편하게 만들 수 있습니다. 이번에는 SweetAlert를 사용하여 팝업창을 띄울 때, 페이지 스크롤을 막을 수 있는 방법에 대해 알아보겠습니다.
SweetAlert란?
SweetAlert는 자바스크립트로 작성된 라이브러리로, 사용자에게 예쁜 디자인의 팝업창을 제공합니다.
SweetAlert 설치 및 사용 방법
SweetAlert는 npm을 통해 설치할 수 있습니다. 아래의 명령어를 통해 SweetAlert를 설치합니다.
npm install sweetalert2
설치가 완료되었다면, 아래와 같이 SweetAlert를 사용할 수 있습니다.
import Swal from 'sweetalert2';
Swal.fire({
title: '알림',
text: '팝업 내용',
icon: 'info',
confirmButtonText: '확인'
});
페이지 스크롤 막기
SweetAlert를 사용하여 팝업창을 띄울 때, 페이지 스크롤을 막아 사용자가 팝업 외부 내용을 스크롤할 수 없게 할 수 있습니다. 이를 위해서는 SweetAlert의 allowOutsideClick 옵션을 false로 설정해주면 됩니다.
import Swal from 'sweetalert2';
Swal.fire({
title: '알림',
text: '팝업 내용',
icon: 'info',
confirmButtonText: '확인',
allowOutsideClick: false,
});
위와 같이 설정하면 팝업창이 열릴 때, 페이지 스크롤이 막히게 됩니다. 사용자는 팝업창 외부를 클릭하여 팝업창을 닫지 않고는 페이지 스크롤할 수 없습니다.
SweetAlert를 사용하여 예쁜 팝업창을 만들고, 페이지 스크롤을 막아 사용자 경험을 더욱 개선할 수 있습니다. 다양한 SweetAlert 옵션을 활용하여 원하는 기능을 구현해보세요.