웹개발자라면, 자바스크립트 alert창 그동안 갑갑했죠? 세련된 디자인으로 완벽한 대체. 동기 모드까지도!

앞서 두번에 걸쳐 예쁜 alert창 만들기 강의 소스를 올린 적이 있습니다.
이번에는 더욱 발전된 형태로 만들어, 동기 모드까지도 구현했습니다.
이 강좌를 통해 어떻게 alert 소스를 적용하는지 알아보세요.
웹사이트 전체의 alert 창을 한번에 일괄 교체할 수 있습니다.
(공개 소스: '소스놀이터'의 고정 댓글 참조하세요)

[@user-jz7yn8oz8o]

하이브리드앱 개발의뢰도 가능한가요?

[@sourcePlayground]

장기간 작업은 여유가 없는 상황이네요.
비교적 단기간인 지식IN 엑스퍼트는 가능합니다~
m.expert.naver.com/mobile/expert/product/detail?storeId=100027069&productId=100067819

[@chepchep7734]

전 강의에서 질문드렸었는데 지금 react 사용중인데 sweetalert2 창의 높이, 폰트 사이즈, 아이콘 사이즈 조절 하는 방법을 아직 모르겠네요..

[@sourcePlayground]

sweetalert2를 react에 적용하되, 세부적인 디자인적 제어를 하고 싶다는 말씀이시죠?
Swal.fire({
title: "예입니다.",
customClass:'my-class',
..
..
..
});
이처럼 Swal.fire에 customClass를 설정해 보세요.
그리고 스타일시트에서 myswal-class에 대해 필요한 정의를 하시면 됩니다.
.my-class {
font-size:12px;
height:500px;
width: 900px;
}

[@chepchep7734]

@@sourcePlayground 고급정보 감사합니다!

[@sourcePlayground]

(공개 소스: 아래 소스를 HTML 상단에 넣으시면 됩니다)

async function alert(msg) {
try
{
if(!$(Swal.getTitle()).html()) {
sourcePlayground_Cnt = 0;
}
if(typeof sourcePlayground_Cnt !== "undefined" && sourcePlayground_Cnt > 0) { //이미 실행중인 경우
if(sourcePlayground_Cnt == 1) {
msg = "("+sourcePlayground_Cnt+") " + $(Swal.getTitle()).html() + "" + "("+(sourcePlayground_Cnt+1)+") " + msg;
}
else {
msg = $(Swal.getTitle()).html() + "" + "("+(sourcePlayground_Cnt+1)+") " + msg;
}
sourcePlayground_Cnt++;
}
else {
sourcePlayground_Cnt = 1;
}
await Swal.fire({
"title": msg,
"timer":2000,
"returnFocus": false,
didOpen: () => {
window.localStorage.setItem("sourceplaygroumd_myfocusobj", document.activeElement.id)
},
willClose: () => {
var myfocusobj = window.localStorage.getItem("sourceplaygroumd_myfocusobj");
if(myfocusobj && myfocusobj != null) {
document.getElementById(myfocusobj).focus();
}
}
});
sourcePlayground_Cnt--;
}
catch (e)
{
try
{
Swal.isVisible();
}
catch (e_inner)
{
sourcePlayground_Cnt = 0;
setTimeout(function(){alert(msg);}, 500);
}
}
}
(만약, alert창 디자인을 커스터마이징(width, height, font-size등을 변경)하고 싶다면 아래처럼 하실 수 있습니다)
(아래 소스에서 myswal-class 부분에 "/*"와 "*/"를 제거하여 주석 해제 하시고, 원하시는 css 적으시면 디자인 커스터마이징 가능합니다)

.myswal-class {
/* width:500px;
height:300px;
font-size:12px;*/
}


async function alert(msg) {
try
{
if(!$(Swal.getTitle()).html()) {
sourcePlayground_Cnt = 0;
}
if(typeof sourcePlayground_Cnt !== "undefined" && sourcePlayground_Cnt > 0) { //이미 실행중인 경우
if(sourcePlayground_Cnt == 1) {
msg = "("+sourcePlayground_Cnt+") " + $(Swal.getTitle()).html() + "" + "("+(sourcePlayground_Cnt+1)+") " + msg;
}
else {
msg = $(Swal.getTitle()).html() + "" + "("+(sourcePlayground_Cnt+1)+") " + msg;
}
sourcePlayground_Cnt++;
}
else {
sourcePlayground_Cnt = 1;
}
await Swal.fire({
"title": msg,
"timer":2000,
"customClass":'myswal-class',
"returnFocus": false,
didOpen: () => {
window.localStorage.setItem("sourceplaygroumd_myfocusobj", document.activeElement.id)
},
willClose: () => {
var myfocusobj = window.localStorage.getItem("sourceplaygroumd_myfocusobj");
if(myfocusobj && myfocusobj != null) {
document.getElementById(myfocusobj).focus();
}
}
});
sourcePlayground_Cnt--;
}
catch (e)
{
try
{
Swal.isVisible();
}
catch (e_inner)
{
sourcePlayground_Cnt = 0;
setTimeout(function(){alert(msg);}, 500);
}
}
}