新規投稿
フォローする

popModalを使い複数のモーダルを表示させるには

popModalを使ってアプリの説明をきれいにまとめよう! – cybozu developer network

実現したいこと:上記を参考にして、Kintone新規レコード作成時に、ボタンを押すとモーダルウィンドウで注釈を表示させようとしています。いくつかボタンを設置し、それぞれ別のモーダルウィンドウを出すようにしたいです。

試したこと:以下のように詳細画面のスペース要素を取得し、ダイアログを表示させるようにしました。

var myHeaderSpace = kintone.app.record.getSpaceElement('note1');

スペースが1つの時はうまく動作したのですが、

スペースを2つ設置し、ダイアログの内容を2つ目用に書き換えたのですが、2つ目のボタンを押しても1つ目と同じモーダルウィンドウが表示されてしまいます。スペースごと別の内容を表示させる方法をご教授頂けないでしょうか?

0

2件のコメント

Avatar
江田篤史

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);
    });
  });
});
0
Avatar
mk

ご教授頂きありがとうございます。

無事表示させることができました。

0
サインインしてコメントを残してください。