UI-dialogを使用してダイアログを部品化しています。
部品化してて思ったのですが、display_dialogの引数todoを実行させたいのですが上手く行きません。
OKボタンを押した時に、例えば以下の様なイベントを発生させられないかを模索しています。
- OKボタンを押した時にリンク先へ飛ぶ
- ダイアログをクローズさせる
- ブラウザ自体を閉じる
HTMLから渡した引数だけではイベント処理の実行は無理なのでしょうか?
例えばtodoの引数にlocation.href=./menu.html
と記述してdisplay_dialogメソッドのOKボタンを押した際に、location.href=./menu.html
を実行する、といった具合です。
どうぞ宜しくお願い致します。
function display_dialog(message,title,todo,can) {
var msg = "<div>" + message + "</div>";
var defer = $.Deferred();
//%表記に変換
var wWidth = $(window).width();
var dWidth = wWidth * 0.6; //60%
var wHeight = $(window).height();
var dHeight = wHeight * 0.4; //40%
//$.fn.modal.Constructor.prototype._enforceFocus = function() {};
//キャンセルボタンが不要な場合
if (can=="") {
$(msg).dialog({
dialogClass:"wkDialogClass",
modal:false, //モーダル表示
width:dWidth, //ダイアログの横幅(%)
height:dHeight, //ダイアログの縦幅(%)
position: {my: "center", at: "center", of: window}, //位置
hide:500, //消える時のアニメーション処理ミリ秒
show:500, //表示の時のアニメーション処理ミリ秒
title:title, //タイトル
buttons:[
{tabIndex: -1,
text:"OK",
class:"wkBtnOk",
click:
function() {
todo();
//ダイアログを閉じる
$(this).dialog("close");
defer.resolve(true);
}
},
{tabIndex: -1,
text:"閉じる",
class:"wkBtnNg",
click:
function() {
//ダイアログを閉じる
$(this).dialog("close");
defer.resolve(false);
}
}
]
});
} else {
//キャンセルボタンが必要な場合
$(msg).dialog({
dialogClass:"wkDialogClass",
modal:false, //モーダル表示
width:dWidth, //ダイアログの横幅(%)
height:dHeight, //ダイアログの縦幅(%)
position: {my: "center", at: "center", of: window}, //位置
hide:500, //消える時のアニメーション処理ミリ秒
show:500, //表示の時のアニメーション処理ミリ秒
title:title, //タイトル
buttons:[
{tabIndex: -1,
text:"OK",
class:"wkBtnOk",
click:
function() {
todo();
//ダイアログを閉じる
$(this).dialog("close");
defer.resolve(true);
}
},
{tabIndex: -1,
text:"キャンセル",
class:"wkBtnCancel",
click:
function() {
//ダイアログを閉じる
$(this).dialog("close");
defer.resolve(false);
}
},
{tabIndex: -1,
text:"閉じる",
class:"wkBtnNg",
click:
function() {
//ダイアログを閉じる
$(this).dialog("close");
defer.resolve(false);
}
}
]
});
}
return defer.promise();
}
//ダイアログを2回呼ぶ場合
function message_dialog(message1,message2,title,url,can) {
display_dialog(message1,title,url,can).then(function (answer) {;
if(answer){
display_dialog(message2,title,url,can);
}
});
}
.wkDialogClass {
background-color: #f5f5f5;
z-index: 1060;
}
/*ヘッダー:タイトル*/
.wkDialogClass .ui-dialog-titlebar {
color:black;
background:#dcdcdc;
}
/*本文*/
.wkDialogClass .ui-dialog-content {
color:black;
background:#ffffe0;
}
/*フッター:ボタン*/
.wkDialogClass .ui-dialog-buttonpane {
background-color: #dcdcdc;
}
/*OKボタン*/
.wkBtnOk {
color: white;
background-color: #4169e1;
}
/*OKボタン<カーソルが当たった時>*/
.wkBtnOk:hover {
color:green;
background-color:orange;
}
/*OKボタン<フォーカスが当たった時>*/
.wkBtnOk:focus{
color:green;
background-color:orange;
}
/*OKボタン<ボタンを押した時>*/
.wkBtnOk:active{
color:green;
background-color:orange;
}
/*キャンセルボタン*/
.wkBtnCancel {
color: white;
background-color: #4169e1;
}
/*キャンセルボタン<カーソルが当たった時>*/
.wkBtnCancel:hover {
color:green;
background-color:orange;
}
/*キャンセルボタン<フォーカスが当たった時>*/
.wkBtnCancel:focus{
color:green;
background-color:orange;
}
/*キャンセルボタン<ボタンを押した時>*/
.wkBtnCancel:active{
color:green;
background-color:orange;
}
/*閉じるボタン*/
.wkBtnNg {
color: white;
background-color: green;
}
/*閉じるボタン<カーソルが当たった時>*/
.wkBtnNg:hover {
color:green;
background-color:orange;
}
/*閉じるボタン<フォーカスが当たった時>*/
.wkBtnNg:focus{
color:green;
background-color:orange;
}
/*閉じるボタン<ボタンを押した時>*/
.wkBtnNg:active{
color:green;
background-color:orange;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<input type="button" onClick="display_dialog('登録せずに戻りますが、よろしいですか?','画面','location.href=./menu.html','')" value="ボタン">
</body>
</html>