<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal confirmation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$(".inpopup").click(function(){
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
});
</script>
</head>
<body>
<div id="dialog-confirm" title="Empty the recycle bin?" style="display:none;">
팝업 내용
</div>
<a href="javascript:;" class="inpopup">팝업 나와라~</a>
</body>
</html>
팝업나와라를 클릭 할 경우 제이쿼리 액션 $(".inpopup").click(function() 이 부분이 작동을 하게 되고 화면에 모달 다이얼로그 박스가 출력되게 됩니다.