728x90
목동코딩 : 코딩교육
웹 시스템을 개발하면서 결과에 따라서 서로 다는 내용의 팝업을 띄워야 하는 경우에 사용하는 방법이다
<div>로 Layer를 만들고 , Ajax 결과에 따라서 각각 다른 내용의 HTML을 띄우는 방법을 정리해둔다.
<div id="layerPopup" class="text-center;" style="position:absolute; z-index:10; width:500px; height:500px; left:50%; top:50%; margin-left:-250px; margin-top:-250px; background-color:white; display:none;">
<div id="layerPopup_content">
</div>
<button type="button" id="btn_layerPopup_hide">팝업닫기</button>
</div>
<script>
$(document).ready(function(){
$('#btn_layerPopup_hide').click(function(){
$('#layerPopup').hide();
});
});
</script>
<script>
function checkEvent(){
alert("이벤트 체크");
$.post("phpCheckEvent.php", {
User: "01092899979",
Message: "message"
}, function(data) {
alert(data);
if (data == "SUCCESS") {
$('#layerPopup_content').load('./popupOK.html', function(){
$('#layerPopup').show();
});
} else {
$('#layerPopup_content').load('./popupNO.html', function(){
$('#layerPopup').show();
});
}
});
}
</script>popupOK.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트정보</title>
</head>
<body>
<div class="container" >
<div class="row text-center" style="padding:20px ;">
<div class="col-lg-12 col-md-12 ">
<h1>출석이벤트에 당첨됐습니다</h1>
</div>
</div>
</div>
</body>
</html>
popupNO.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트정보</title>
</head>
<body>
<div class="container" >
<div class="row text-center" style="padding:20px ;">
<div class="col-lg-12 col-md-12 ">
<h1>다음 기회를 이용해 주세요</h1>
</div>
</div>
</div>
</body>
</html>
728x90
'코딩교육 > Web' 카테고리의 다른 글
| 목동코딩학원 : Html, Jquery 이벤트 처리하는 방법 (0) | 2023.02.17 |
|---|---|
| 목동코딩학원 : Html, Ajax 화면이 새로고침 되는 원인 찾기 (0) | 2023.02.17 |
| 목동코딩학원, html 로딩바 만드는 방법 (0) | 2021.10.14 |
| 목동코딩, 웹페이지 개발, 원하는 input 값 읽어오기 (0) | 2021.09.23 |
| 목동코딩, Asp.net mvc EF에서 Data 추가하는 방법 (0) | 2021.09.23 |