| コメント |
@DIV
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery テンプレート</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
// ***********************************************
// 画面初期化後のイベント( jQuery )
// ***********************************************
$(function() {
$("#dialog1")
.attr("type","button")
.val("通常モーダルダイアログ")
.css("width", "250px")
.click(function(){
$( "#dialog-message" ).text("ダイアログ内部のメッセージです")
.dialog({
modal: true,
title: "ダイアログのタイトルです",
close: function() {
console.log("x ボタンがクリックされました");
},
buttons: [
{
text: "確認",
click: function() {
$( this ).dialog( "close" );
console.log("確認 ボタンがクリックされました");
}
},
{
text: "キャンセル",
click: function() {
$( this ).dialog( "close" );
console.log("キャンセル ボタンがクリックされました");
}
}
]
});
});
$("#dialog2")
.attr("type","button")
.val("モーダルダイアログ(IFRAME 利用)")
.css("width", "250px")
.click(function(){
$( "#dialog-iframe" )
.dialog({
modal: true,
title: "ダイアログのタイトルです",
width: 720,
close: function() {
console.log("x ボタンがクリックされました");
},
buttons: [
{
text: "確認",
click: function() {
$( this ).dialog( "close" );
console.log("確認 ボタンがクリックされました");
}
},
{
text: "キャンセル",
click: function() {
$( this ).dialog( "close" );
console.log("キャンセル ボタンがクリックされました");
}
}
]
});
});
});
</script>
</head>
<body>
<input id="dialog1">
<br><br>
<input id="dialog2">
<div id="dialog-message" title="" style='display:none;'>
</div>
<div id="dialog-iframe" title="" style='display:none;'>
<iframe
src="about:blank"
name="iframe_win"
id="iframe_win"
frameborder="0"
scrolling="no"
width="680"
height="380"
style=''
></iframe>
</div>
</body>
</html>
@END |
メンテナンス