1. jQuery UI 위젯 - 다이얼로그(dialog) : 팝업창, 대화상자
페이지 정보
작성자 관리자 댓글 0건 조회 1,246회 작성일 19-06-03 23:26본문
1. jQuery UI 위젯 - 다이얼로그(dialog) : 팝업창, 대화상자
실습1.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$(function(){
// jquery 설정
$("#dialog").dialog({
//이벤트 발생했을때 보여주려면 autoOpen : false로 지정해줘야 한다.
autoOpen: false,
//레이어팝업 넓이
width: 400,
height: 400,
draggable:false, //창 드래그 못하게
resizable:true,
//뒷배경을 disable 시키고싶다면 true
modal: true,
//버튼종류
buttons: [
{
//버튼텍스트
text: "Ok",
//클릭이벤트발생시 동작
click: function() {
$( this ).dialog( "close" );
}
},
{
//버튼텍스트
text: "Cancel",
//클릭이벤트발생시 동작
click: function(){
$( this ).dialog( "close" );
}
}
]
});
// 이벤트 설정
$("#button").click(function(){
$( "#dialog" ).dialog( "open" );
})
});
</script>
</head>
<body>
<div id="dialog" title="공지사항">
java 초급<br>
java 중급<br>
java 고급<br>
강좌가 새롭게 업로드되었습니다.
</div>
<button id="button">Open Modal</button>
</body>
</html>
실습2.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$(function(){
// jquery 설정
$("#dialog").dialog({
//이벤트 발생했을때 보여주려면 autoOpen : false로 지정해줘야 한다.
autoOpen: false,
//레이어팝업 넓이
width: 400,
height: 400,
draggable:false, //창 드래그 못하게
resizable:true,
//뒷배경을 disable 시키고싶다면 true
modal: true,
});
// 이벤트 설정
$("#button").click(function(){
$( "#dialog" ).load('/ajax.html').dialog( "open" );
})
});
</script>
</head>
<body>
<div id="dialog" title="공지사항">
java 초급<br>
java 중급<br>
java 고급<br>
강좌가 새롭게 업로드되었습니다.
</div>
<button id="button">Open Modal</button>
</body>
</html>
실습3.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: "/ajax.html",
success: function(data){
$("#dialog").html(data);
}
});
$("#dialog").dialog(
{
bgiframe: true,
autoOpen: false,
height: 100,
modal: true
}
);
// 이벤트 설정
$("#button").click(function(){
$( "#dialog" ).dialog( "open" );
})
});
</script>
</head>
<body>
<div id="dialog" title="공지사항">
java 초급<br>
java 중급<br>
java 고급<br>
강좌가 새롭게 업로드되었습니다.
</div>
<button id="button">Open Modal</button>
</body>
</html>
실습4.
// 타이틀 없애기
$("#dialog").dialog().parents(".ui-dialog").find(".ui-dialog-titlebar").remove();
댓글목록
등록된 댓글이 없습니다.