jquery 이용하여 팝업창 만들기

jQuery, HTML, CSS 를 이용하여 팝업 창을 만들어 보자.

 

 

소스코드

 

 

결과화면

 

 

코드 원본

 

<script>
$(function() {
$("#ajax_popup").hide();
});

function alert(msg) {
if (msg) {
$("#popup_content").html(msg);
$("#ajax_popup").show();
} else {
$("#popup_content").html("잘못된 요청입니다.");
$("#ajax_popup").show();
}
}
</script>

<style>
#ajax_popup {
z-index:99999;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 300px;
height:auto;
background: #fff;
border:1px #cccccc solid;
font-size:11pt;
padding:20px;
margin-bottom:20px;
box-shadow: 0px 0px 10px #000;
}

.popup_btn {
background:white;
color:black;
height:25px;
border:1px #cccccc solid;
}
</style>

<div id="ajax_popup">
<span style="font-weight:bold; font-size:13pt">사이트 알림</span><br/><br/>
<span id="popup_content">기본 ajax 팝업입니다</span><br/><br/>
<center><button onclick="$('#ajax_popup').hide();" class="popup_btn">&nbsp;확인&nbsp;</button></center>
</div>