it-swarm.com.de

Wie verwende ich Modal Pop Up mit Material Design Lite?

Ich habe vor kurzem begonnen, die neueste Desktop-Version von Google Material Design Lite zu verwenden. Ich stellte fest, dass es kein modales Popup gibt und das Team es für die nächste Version noch nicht implementiert hat.

Ich habe versucht, das Bootstrap-Modell einzubeziehen, aber das funktioniert nicht. Infect scheint ziemlich durcheinander zu sein. Ich glaube, dass die Klassen/Stile miteinander in Konflikt geraten.

Irgendeine Idee, was als Ersatz gut funktionieren wird ??

Danke für Ihre Hilfe.

9
foo-baar

Ich suchte auch nach einem ähnlichen Plugin und fand dann mdl-jquery-modal-dialog

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

Ich habe dies verwendet, weil der andere, den ich gefunden hatte, ein Problem mit IE11 hatte. Dieser funktioniert gut.

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

Hier ein JSFiddle: https://jsfiddle.net/w5cpw7yf/

7
Suyash

Dafür habe ich eine reine JavaScript-Lösung gefunden

Sie können die Standard-Bootstrap-Datenattribute für die Schaltflächen verwenden und sicherstellen, dass Ihre Schaltflächen und Modals ihre eigenen eindeutigen IDs haben.

Sie müssen JS von Material Design Lite enthalten, bevor Sie dieses JavaScript verwenden können

Überprüfen Sie den Code. Alle Bewertungen werden begrüßt. :)

// 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

Ich verwende MDL mit Bootstrap und das Modal wird korrekt angezeigt, nachdem das data-backdrop-Attribut dem modalen Element hinzugefügt wurde:

<dialog data-backdrop="false">

Ich hoffe es hilft!

0
HomerBailon