Открытие нескольких модальных диалогов MDL? - PullRequest
Новая
       10

Открытие нескольких модальных диалогов MDL?

0 голосов
/ 20 сентября 2018

У меня есть идея, что я хотел бы, чтобы на моем веб-сайте была страница продукта, на которой есть две карты 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();
    });
  }());

1 Ответ

0 голосов
/ 27 сентября 2018

Добавить второй диалог (в данном случае 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.

...