<AI>
HTMLの要素をマウスでクリック（ピック）して、その内容を <dialog> 要素で表示するには、
click イベントと showModal() メソッドを使います。
html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>要素ピック＆ダイアログ表示</title>
  <style>
    .pickable {
      padding: 15px;
      margin: 10px;
      border: 2px solid #333;
      cursor: pointer;
    }
    dialog {
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 8px;
    }
  </style>
</head>
<body>

  
  <div class="pickable" data-info="リンゴの詳細情報です。">リンゴ (クリックしてね)</div>
  <div class="pickable" data-info="ミカンの詳細情報です。">ミカン (クリックしてね)</div>

  
  <dialog id="info-dialog">
    <p id="dialog-text"></p>
    <button id="close-btn">閉じる</button>
  </dialog>

  <script>
    const items = document.querySelectorAll('.pickable');
    const dialog = document.querySelector('#info-dialog');
    const dialogText = document.querySelector('#dialog-text');
    const closeBtn = document.querySelector('#close-btn');

    // 要素をクリックしたとき
    items.forEach(item => {
      item.addEventListener('click', () => {
        const info = item.getAttribute('data-info');
        dialogText.textContent = info; // テキストをセット
        dialog.showModal(); // ダイアログを開く
      });
    });

    // 閉じるボタンを押したとき
    closeBtn.addEventListener('click', () => {
      dialog.close(); // ダイアログを閉じる
    });
  </script>

</body>
</html>

仕組みと使い方
クリックの検知: querySelectorAll で対象の要素をすべて選び、addEventListener でクリックを監視します。
データの取得: getAttribute を使って、クリックした要素が持つ固有のデータを取り出します。
ダイアログの操作: 標準の HTML <dialog> 要素 の showModal() で表示し、close() で閉じます。