popModalを使ってアプリの説明をきれいにまとめよう！ – cybozu developer network
実現したいこと：上記を参考にして、Kintone新規レコード作成時に、ボタンを押すとモーダルウィンドウで注釈を表示させようとしています。いくつかボタンを設置し、それぞれ別のモーダルウィンドウを出すようにしたいです。
試したこと：以下のように詳細画面のスペース要素を取得し、ダイアログを表示させるようにしました。
var myHeaderSpace = kintone.app.record.getSpaceElement(‘note1’);
スペースが1つの時はうまく動作したのですが、
スペースを2つ設置し、ダイアログの内容を2つ目用に書き換えたのですが、2つ目のボタンを押しても1つ目と同じモーダルウィンドウが表示されてしまいます。スペースごと別の内容を表示させる方法をご教授頂けないでしょうか？
mkさん
お世話になっております．
参考コード20行目の
$('.dialog_content').dialogModal({
でDOMのclassが共通になってしまっていることが原因かと思います．
各スペースの要素IDなどを用いてclassを区別すると良いと思います．
下記のようなコードで実装できます．
jQuery(function ($) {
"use strict";
var showDialogEvent = [
"app.record.detail.show",
"app.record.edit.show",
"app.record.create.show"
];
kintone.events.on(showDialogEvent, function (e) {
var mySpaces = [
{
spaceId: 'space1', //スペースの要素ID
text: 'ノートPC利用者によって申請ルールが異なってくるため、</br>登録前に必ず<b>ノートPC申請の注意事項</b>をご確認ください！</br>', //スペースに表示する文字
button: 'ノートPC申請の注意事項', //ボタンに表示する文字
dialogs: [ //ダイアログの内容(配列指定)
$('<div class="dialog_content" style="display:none;">' +
'<div class="dialogModal_header">社員用ノートPCの申請</div>' +
'<div class="dialogModal_content">' +
'ノートPCの交換・追加が必要な方はこのアプリで申請してください。' +
'</div>' +
'<div class="dialogModal_footer">' +
'<button class="btn btn-primary" data-dialogmodal-but="next" type="button">Next</button>' +
'<button class="btn btn-default" data-dialogmodal-but="cancel" type="button">Cancel</button>' +
'</div>' +
'</div>'),
$('<div class="dialog_content" style="display:none;">' +
'<div class="dialogModal_header">社外の方に貸し出す場合</div>' +
'<div class="dialogModal_content">' +
'イベントの参加者に対して、ノートパソコンを貸し出す場合、このアプリでの申請が必要となります。' +
'</div>' +
'<div class="dialogModal_footer">' +
'<button class="btn btn-default btn-left" data-dialogmodal-but="prev" type="button">' +
'Back</button>' +
'<button class="btn btn-primary" data-dialogmodal-but="next" type="button">Next</button>' +
'<button class="btn btn-default" data-dialogmodal-but="cancel" type="button">Cancel</button>' +
'</div>' +
'</div>'),
$('<div class="dialog_content" style="display:none;">' +
'<div class="dialogModal_header">社外に持ち出す場合の注意事項</div>' +
'<div class="dialogModal_content">' +
'持ち出しの設定を行ったPCだけ持ち出すことができます。' +
'</div>' +
'<div class="dialogModal_footer">' +
'<button class="btn btn-default btn-left" data-dialogmodal-but="prev" type="button">' +
'Back</button>' +
'<button class="btn btn-primary" data-dialogmodal-but="ok" type="button">Ok</button>' +
'<button class="btn btn-default" data-dialogmodal-but="cancel" type="button">Cancel</button>' +
'</div>' +
'</div>')
]
},
{
spaceId: 'space2',
text: '説明文',
button: 'ボタン',
dialogs: [
$('<div class="dialog_content" style="display:none;">' +
'<div class="dialogModal_header">あ</div>' +
'<div class="dialogModal_content">' +
'あいうえお' +
'</div>' +
'<div class="dialogModal_footer">' +
'<button class="btn btn-primary" data-dialogmodal-but="next" type="button">Next</button>' +
'<button class="btn btn-default" data-dialogmodal-but="cancel" type="button">Cancel</button>' +
'</div>' +
'</div>'),
$('<div class="dialog_content" style="display:none;">' +
'<div class="dialogModal_header">か</div>' +
'<div class="dialogModal_content">' +
'かきくけこ' +
'</div>' +
'<div class="dialogModal_footer">' +
'<button class="btn btn-default btn-left" data-dialogmodal-but="prev" type="button">' +
'Back</button>' +
'<button class="btn btn-primary" data-dialogmodal-but="ok" type="button">Ok</button>' +
'<button class="btn btn-default" data-dialogmodal-but="cancel" type="button">Cancel</button>' +
'</div>' +
'</div>')
]
}
];
mySpaces.forEach(function (mySpace) {
//詳細画面のメニュー部分の空白要素を取得
var mySpaceElement = kintone.app.record.getSpaceElement(mySpace.spaceId);
mySpaceElement.innerHTML = "";
//ダイアログを表示する関数を作成
var showDialog = function () {
$('.' + mySpace.spaceId).dialogModal({
topOffset: 0,
top: '10%',
type: '',
onOkBut: function () { },
onCancelBut: function () { },
onLoad: function (el, current) { },
onClose: function () { },
onChange: function (el, current) { }
});
};
//ダイアログと表示内容を用意
var createDialogContent = function () {
mySpace.dialogs.forEach(function (dialog) {
dialog.addClass(mySpace.spaceId);
$(mySpaceElement).append(dialog);
});
};
createDialogContent();
//popModalのボタンと説明をフォームにあわせて揃える
$(mySpaceElement).css({ 'padding-left': '20px' });
$(mySpaceElement).append(mySpace.text);
var myPMBtn = $("<button>", { text: mySpace.button, indent: '10' });
//マウスをボタンに当てるときのボタン色を指定
myPMBtn.hover(function () {
$(this).css({ 'color': '#ececec', 'background': '#3498db' });
}, function () {
$(this).css({ 'color': '', 'background': '' });
});
myPMBtn.on('click', showDialog);
$(mySpaceElement).append(myPMBtn);
});
});
});
ご教授頂きありがとうございます。
無事表示させることができました。