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

**URL:** <https://community.cybozu.dev/t/topic/4290>\
**Category:** kintone 開発相談\
**Created:** [2019 年 8 月 15 日午前 8:52 UTC](https://community.cybozu.dev/t/topic/4290 "2019-08-15T08:52:05Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1561](https://avatars.discourse-cdn.com/v4/letter/l/a87d85/32.png) [@Legacy\_Account1561](https://community.cybozu.dev/u/Legacy_Account1561)\
**Post date:** [2019 年 8 月 15 日午前 8:52 UTC](https://community.cybozu.dev/t/topic/4290/1 "2019-08-15T08:52:05Z")

</div>

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

[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-](https://community.cybozu.dev/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を使った。

&nbsp;

[https://micromodal.now.sh/](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](https://teratail.com/questions/195252)

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

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

```

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

&nbsp;

&nbsp;

&nbsp;