[jQuery] 커스텀 팝업창 오픈하기[jQuery] 커스텀 팝업창 오픈하기

Posted at 2018. 8. 14. 17:25 | Posted in JavaScript & jQuery/jQuery





다운로드 : https://www.jqueryscript.net/



Simple Plain Dialog Popup Plugin For jQuery Alerts이라는 jQuery 모듈을 사용하게 되었다.

이런 기존의 Dialog 경고창을 대신해 주는것을 jAlert이라고 하는 것 같은데 이건 그 수많은 모듈중 한가지일 뿐이다.

사용방법이 굉장히 단순해서 포스팅할 것 까지는 없었지만.

몇가지 기능적인 부분을 사용중 답답함을 느껴 이렇게 포스팅 하게 되었다.




■ 경고(Alert)창 팝업




#01. 기본 경고(Alert)창 팝업



# 소스코드

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: jQuery 심플 다이얼로그 팝업 ::</title>
<link rel="stylesheet" href="jquery.alerts.css">
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/JavaScript" src="jquery.alerts.js" ></script>
<script type="text/javascript">
    function normalAlertWindow() {
        jAlert("루키", "#RED");
    }
</script>
</head>
<body>
    <h1>NOMAL ALERT</h1>
    <input type="button" onClick="normalAlertWindow();" value="경고창"/>
</body>
</html>




# 출력결과





#02. 콜백 기능을 이용한 경고(Alert)창 팝업


사실 해당 글을 포스팅하게 된 이유는 이것이다.

기본적인 alert창의 경우 alert창이 뜨게 되면 확인 버튼을 클릭하기 전까지

다음 작업이 진행되지 않지만, 이 jAlert의 경우는 창이 오픈됨과 동시에 바로 다음 작업이 진행되기 떄문에.

jAlert창이 팝업이 되고 정상적으로 OK 버튼을 누른 이후에 작업을 진행하기 위해서, 콜백 기능을 사용하게 되었다,



# 소스코드

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: jQuery 심플 다이얼로그 팝업 ::</title>
<link rel="stylesheet" href="jquery.alerts.css">
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/JavaScript" src="jquery.alerts.js" ></script>
<script type="text/javascript">
    function callbackAlertWindow() {
        jAlert("피카부", "#VELVET", function() {
            window.location.href = "http://magic.wickedmiso.com/";
        });
    }
</script>
</head>
<body>
    <h1>CALLBACK ALERT</h1>
    <input type="button" onClick="callbackAlertWindow();" value="경고창"/>
</body>
</html>




# 출력결과





■ 확인(Confirm)창 팝업



# 소스코드

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: jQuery 심플 다이얼로그 팝업 ::</title>
<link rel="stylesheet" href="jquery.alerts.css">
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/JavaScript" src="jquery.alerts.js" ></script>
<script type="text/javascript">
    function choiceConfirmWindow() {
        jConfirm("빨간맛", "#RED", function(result) {
            if(result == true) {
                alert("빨간맛 궁금해 허니");
            } else if(result == false) {
                alert("내가 제일 좋아하는건 여름에 너어~");
            }
        });
    }
</script>
</head>
<body>
    <h1>CALLBACK ALERT</h1>
    <input type="button" onClick="choiceConfirmWindow();" value="경고창"/>
</body>
</html> 



# 출력결과






Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기