私は、ユーザが「受け入れ」をクリックしたときにトリガされる関数を受け付ける確認ダイアログ関数を作成しました。Javascriptコールバック関数をコールバック変数に渡す
これで、この関数にコールバックを追加して、システムが応答していることをユーザーに知らせるためのローダーをレンダリングすることができます。
これまでのコードは次のとおりです。
confirmDialog('Confirm deletion', 'Are you sure you want to delete the internet?', function(){alert('test');});
function closeConfirmDialog() {
var dialog = document.getElementById('confirmDialog');
var overlay = document.getElementById('dialogOverlay');
if (dialog) { document.getElementsByTagName('BODY')[0].removeChild(dialog); }
if (overlay) { document.getElementsByTagName('BODY')[0].removeChild(overlay); }
}
function confirmDialog(title, message, confirmCallback) {
// Closing any active confirmDialog
closeConfirmDialog();
// Create all required elements for the dialog box
var dialogOverlay = document.createElement('div');
var dialogBox = document.createElement('div');
var buttonBox = document.createElement('div');
var titleBox = document.createElement('div');
var textBox = document.createElement('div');
var cancelButton = document.createElement('a');
var successButton = document.createElement('a');
// Add classes/content to elements
dialogOverlay.setAttribute('id', 'dialogOverlay');
dialogOverlay.onclick = function() { closeConfirmDialog(); };
dialogBox.setAttribute('id', 'confirmDialog');
buttonBox.className = 'buttonBox';
titleBox.className = 'titleBox';
titleBox.innerHTML = title;
textBox.className = 'textBox';
textBox.innerHTML = message;
cancelButton.className = 'dangerbtn left';
cancelButton.innerHTML = 'Cancel';
cancelButton.onclick = function() { closeConfirmDialog(); };
successButton.className = 'successbtn right';
successButton.innerHTML = 'Confirm';
/**
* This is where I would like to modify the confirmCallback function to always show a loader.
*/
// Here is where I set the callback to the successButton onclick event.
successButton.onclick = confirmCallback;
// Add all elements to their respective wrappers
buttonBox.appendChild(cancelButton);
buttonBox.appendChild(successButton);
dialogBox.appendChild(titleBox);
dialogBox.appendChild(textBox);
dialogBox.appendChild(buttonBox);
// Append the overlay and finished confirmbox to the body.
document.getElementsByTagName('BODY')[0].appendChild(dialogBox);
document.getElementsByTagName('BODY')[0].appendChild(dialogOverlay);
return false;
}
body {
font-family: arial;
}
#confirmDialog {
position: absolute;
top: 10%;
left: 25%;
width: 50%;
border: 1px solid #000;
padding: 10px 10px 0 10px;
box-sizing: border-box;
}
#confirmDialog>.titleBox {
font-weight: bold;
font-size: 16px;
margin-bottom: 4px;
}
#confirmDialog>.textBox {
margin-bottom: 4px;
}
#confirmDialog>.buttonBox {
border-top: 1px solid #000;
padding: 5px 10px;
margin: 0 -10px;
float: left;
width: 100%;
}
#confirmDialog>.buttonBox>.dangerbtn {
background-color: #d9534f;
border-color: #d9534f;
color: #fff;
padding: 4px 12px;
float: left;
cursor: pointer;
}
#confirmDialog>.buttonBox>.successbtn {
background-color: #5cb85c;
border-color: #5cb85c;
color: #fff;
padding: 4px 12px;
float: right;
cursor: pointer;
}
'confirmDialog'をどのように呼び出すことができますか? – georg
これは抜粋です。 confirmDialog( '削除の確認'、 '本当にインターネットを削除しますか?'、function(){alert( 'test');}); – Fyntasia
だから、 'alert(test)'の代わりに、必要なものを書いてください(ローダーなどを表示してください) – georg