打开多个 MDL 模态对话？答案

【问题标题】：Opening Multiple MDL Modal Dialogues?打开多个 MDL 模态对话？
【发布时间】：2019-02-24 16:17:28
【问题描述】：

我有一个想法，我希望我的网站上有一个产品页面，其中有两个 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();
    });
  }());

【问题讨论】：

标签： javascript html modal-dialog material-design-lite

【解决方案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();
    });
  }());

还想看看它是如何工作的

【讨论】：