javascript, jquery

팝업 레이어 설정하기

디츠 2014. 10. 11. 22:49

* script

<script src="jquery-1.11.1.js"></script>
<script src="jquery-ui.js"></script>

* style

.ui-dialog > .ui-widget-header { background:blue; font-size:12px; }
.dialog { font-size:10px; }

* jquery

$(document).ready(function() {
	$("#divlocationinfo").dialog( {
		modal: true,
		title: "subject", // 제목
		width : "750px", // 넓이
		resizable: false, // 리사이즈
		closeOnEscape: false, // esc 작동여부
		hide: 'slide', // 없어질때 효과
		show: 'slide', // 나타날때 효과
	});
});

* html

<div id="dialog">
	<p>test</p>
</div>
http://api.jqueryui.com/dialog/