micromodal.jsを使ってモーダルウインドウをjQueryなしで表示する

kintone カスタマイズ
1

モーダルウインドウを使うには、

https://developer.cybozu.io/hc/ja/articles/213200083-popModal%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E8%AA%AC%E6%98%8E%E3%82%92%E3%81%8D%E3%82%8C%E3%81%84%E3%81%AB%E3%81%BE%E3%81%A8%E3%82%81%E3%82%88%E3%81%86-

この記事があったが、どうしてもjQueryを使いたくなかったので次のようにして、micromodalを使った。

 

https://micromodal.now.sh/

kintone.events.on([
'app.record.create.show',
'app.record.edit.show'
], function (event) {
var mySpaceFieldButton = document.createElement('button');
mySpaceFieldButton.id = 'testtest';
mySpaceFieldButton.innerText = 'テスト';
mySpaceFieldButton.setAttribute('data-micromodal-trigger', "modal-1");
mySpaceFieldButton.onclick = function () {
// 何も書かない
}
var myDiv = document.createElement("div");
var dialogMM = '';
dialogMM += ' <div class="modal micromodal-slide" id="modal-1" aria-hidden="true">';
dialogMM += ' <div class="modal__overlay" tabindex="-1" data-micromodal-close>';
dialogMM += ' <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">';
dialogMM += ' <header class="modal__header">';
dialogMM += ' <h2 class="modal__title" id="modal-1-title">';
dialogMM += ' Micromodal';
dialogMM += ' </h2>';
dialogMM += ' <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>';
dialogMM += ' </header>';
dialogMM += ' <main class="modal__content" id="modal-1-content">';
dialogMM += ' <p>';
dialogMM += ' Try hitting the <code>tab</code> key and notice how the focus stays within the modal itself.';
dialogMM += ' Also, <code>esc</code> to close modal.';
dialogMM += ' </p>';
dialogMM += ' </main>';
dialogMM += ' <footer class="modal__footer">';
dialogMM += ' <button class="modal __btn modal__ btn-primary">Continue</button>';
dialogMM += ' <button class="modal__btn" data-micromodal-close';
dialogMM += ' aria-label="Close this dialog window">Close</button>';
dialogMM += ' </footer>';
dialogMM += ' </div>';
dialogMM += ' </div>';

myDiv.innerHTML = dialogMM;
kintone.app.record.getSpaceElement('space_name').appendChild(mySpaceFieldButton);
kintone.app.record.getSpaceElement('space_name').appendChild(myDiv);
MicroModal.init();
return event;
});

https://teratail.com/questions/195252

こちらのcssを適当な名前で.cssファイルにして一緒にアップロードすれば、モーダルダイアログが表示されました。

mySpaceFieldButton.setAttribute('data-micromodal-trigger', "modal-1");

この部分を見つけるのに苦労したので、シェアしておきます。