01定義
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Dialog
$('#dialog').dialog({
autoOpen: false,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
},
closeOnEscape: false,
dialogClass: 'mydialog',
draggable: false,
height: 'auto',
hide: null,
maxHeight: false,
maxWidth: false,
minHeight: 150,
minWidth: 150,
modal: false,
position: ['center'],
show: null,
stack: true,
width: 600,
zIndex: 1000,
resizable: false
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
});
function closedialog(){
$("#dialog").dialog("close");
}
</script>
<style type="text/css">
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
</style>
</head>
<body>
<div id="dialog" title="ダイアログボックス" style="display : none;">
test
</div>
<p><a href="#" id="dialog_link">Open Dialog</a></p>
</body>
</html>
View
