打开多个MDL模态对话？

Question

我有一个想法，我希望在我的网站上有一个产品页面，其中有两个MDL卡，当单击一个按钮时，两个MDL卡都具有MDL弹出对话框。 这两个弹出窗口将显示不同的产品选项。

我已经制作好了卡片和按钮，但是其中只有一个看起来可以使用，有没有办法在同一页面上启动两个对话框？ Javascript不是我的强项，而是我所从事的对话之一。

另外，虽然让我的想象力疯狂，但我没有想到我可能无法在弹出对话框中包含“快速查看”产品的可能性，但我在许多网站上都看到了这一点，但不确定是否可以实际上能够在对话中做到这一点。

HTML

 <div class="demo-card-wide mdl-card mdl-shadow--2dp">
              <div class="mdl-card__title">
                <h2 class="mdl-card__title-text"></h2>
              </div>
              <div class="mdl-card__supporting-text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
              </div>
              <div class="mdl-card__actions mdl-card--border">
                  <button class="mdl-button mdl-button--raised mdl-js-button dialog-button">Show Dialog</button>

                  <dialog id="dialog" class="mdl-dialog">
                      <h3 class="mdl-dialog__title">MDL Dialog</h3>
                      <div class="mdl-dialog__content">
                        <p>
                          This is an example of the Material Design Lite dialog component.
                          Please use responsibly.
                        </p>
                      </div>
                      <div class="mdl-dialog__actions">
                        <button type="button" class="mdl-button">Close</button>
                        <button type="button" class="mdl-button" disabled>Disabled action</button>
                      </div>
                    </dialog>
           </div>

              <div class="mdl-card__menu">
                <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="material-icons">share</i>
    </button>
              </div>
            </div>

JS：

 (function() {
    'use strict';
    var dialogButton = document.querySelector('.dialog-button');
    var dialog = document.querySelector('#dialog');
    if (! dialog.showModal) {
      dialogPolyfill.registerDialog(dialog);
    }
    dialogButton.addEventListener('click', function() {
       dialog.showModal();
    });
    dialog.querySelector('button:not([disabled])')
    .addEventListener('click', function() {
      dialog.close();
    });
  }());

Answer 1

添加第二个对话框（在本例中为dialog-1，dialog-button-1）

        <div class="demo-card-wide mdl-card mdl-shadow--2dp">
          <div class="mdl-card__title">
            <h2 class="mdl-card__title-text"></h2>
          </div>
          <div class="mdl-card__supporting-text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
          </div>
          <div class="mdl-card__actions mdl-card--border">
              <button class="mdl-button mdl-button--raised mdl-js-button dialog-button-1">View Product</button>

              <dialog id="dialog-1" class="mdl-dialog">
                  <h3 class="mdl-dialog__title">Product 2</h3>
                  <div class="mdl-dialog__content">
                    <p>
                      This is an example of the Material Design Lite dialog component.
                      Please use responsibly.
                    </p>
                  </div>
                  <div class="mdl-dialog__actions">
                    <button type="button" class="mdl-button">Close</button>

                  </div>
                </dialog>

          </div>
          <div class="mdl-card__menu">
            <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
  <i class="material-icons">share</i>
</button>
          </div>

加倍使用Javascript

   (function() {
    'use strict';
    var dialogButton = document.querySelector('.dialog-button-1');
    var dialog = document.querySelector('#dialog-1');
    if (! dialog.showModal) {
      dialogPolyfill.registerDialog(dialog);
    }
    dialogButton.addEventListener('click', function() {
       dialog.showModal();
    });
    dialog.querySelector('button:not([disabled])')
    .addEventListener('click', function() {
      dialog.close();
    });
  }());

尚未了解如何将其用作产品快速浏览，但到目前为止，它仍然运行良好，但是，我注意到它在Safari上无法正常工作的问题。