web-dev-qa-db-fra.com

Comment utiliser Modal Pop up avec Material Design Lite?

J'ai récemment commencé à utiliser la dernière version de Google Material Design Lite pour ordinateur de bureau. Je me suis dit qu'il n'y avait pas de menu contextuel modal et l'équipe ne l'avait pas encore implémentée pour la prochaine version.

J'ai essayé d'inclure le modèle bootstrap dans celui-ci, mais cela ne fonctionne pas, l'infection semble assez gâchée, je crois avec les classes/styles qui s'affrontent.

Toute idée qui va bien fonctionner comme remplacement?

Merci de votre aide.

modal-dialogmaterial-designmaterial-design-lite
9
foo-baar

Je cherchais aussi un plugin similaire, puis j'ai trouvé mdl-jquery-modal-dialog

https://github.com/oRRs/mdl-jquery-modal-dialog

Je l'ai utilisé parce que l'autre que j'ai trouvé avait un problème avec IE11. Celui-ci fonctionne bien.

<button id="show-info" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
    Show Info
</button>

Voici un JSFiddle: https://jsfiddle.net/w5cpw7yf/

7
Suyash

Je suis venu avec une solution JavaScript pure pour cette

Vous pouvez utiliser les attributs de données d'amorçage par défaut pour les boutons et vous assurer que vos boutons et modaux ont leur propre ID unique.

Vous devez avoir le JS de Material Design Lite inclus avant d'utiliser ce JavaScript

Découvrez le code. Tous les commentaires sont les bienvenus. :)

// Selecting all Buttons with data-toggle="modal", i.e. the modal triggers on the page
var modalTriggers = document.querySelectorAll('[data-toggle="modal"]');

// Getting the target modal of every button and applying listeners
for (var i = modalTriggers.length - 1; i >= 0; i--) {
  var t = modalTriggers[i].getAttribute('data-target');
  var id = '#' + modalTriggers[i].getAttribute('id');

  modalProcess(t, id);
}

/**
 * It applies the listeners to modal and modal triggers
 * @param  {string} selector [The Dialog ID]
 * @param  {string} button   [The Dialog triggering Button ID]
 */
function modalProcess(selector, button) {
  var dialog = document.querySelector(selector);
  var showDialogButton = document.querySelector(button);

  if (dialog) {
    if (!dialog.showModal) {
      dialogPolyfill.registerDialog(dialog);
    }
    showDialogButton.addEventListener('click', function() {
      dialog.showModal();
    });
    dialog.querySelector('.close').addEventListener('click', function() {
      dialog.close();
    });
  }
}
<!-- Button to trigger Modal-->
<button class="mdl-button mdl-js-button" id="show-dialog" data-toggle="modal" data-target="#upload-pic">
	Show Modal
</button>

<!-- Modal -->
<dialog id="upload-pic" class="mdl-dialog mdl-typography--text-center">
  <span class="close">&times;</span>
  <h4 class="mdl-dialog__title">Hello World</h4>
  <div class="mdl-dialog__content">
    <p>This is some content</p>
  </div>
</dialog>

2
Valentino Pereira

J'utilise MDL avec bootstrap et le modal s'affiche correctement après l'ajout de l'attribut data-backdrop à l'élément modal:

<dialog data-backdrop="false">

J'espère que ça aide!

0
HomerBailon