Come utilizzare Modal Pop up con Material Design Lite?

Question

Recentemente ho iniziato a utilizzare l'ultima versione desktop di Google Material Design Lite, ho immaginato che non disponga di un popup modale e che il team non lo abbia ancora implementato per la prossima versione.

Ho provato ad includere il modello di bootstrap in esso, ma questo non funziona infettare sembra piuttosto incasinato, credo con le classi/gli stili che si scontrano gli uni con gli altri.

Qualunque idea cosa funzionerà bene come ricambio ??

Grazie per il vostro aiuto.

Answer 1

Io uso MDL con bootstrap e il modal è visualizzata correttamente dopo l'aggiunta del data-backdrop attribuiscono questo all'elemento modale:

<dialog data-backdrop="false"> 

Speranza che aiuta!

Answer 2

Sono stato anche alla ricerca di un plugin simile e poi ho trovato MDL-jquery-modal-dialog

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

Ho usato questo perché l'altro ho trovato stava avendo problema su IE11. Questo funziona bene.

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

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

Answer 3

mi si avvicinò con una soluzione JavaScript puro per questo

È possibile utilizzare gli attributi dei dati di default bootstrap per i pulsanti, e assicurarsi che i pulsanti e modali hanno i loro ID unici.

È necessario disporre di JS di Material Design Lite presenti prima di utilizzare questa JavaScript

Partenza il codice. Tutte le recensioni sono benvenute. :)

// 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"> 
 
\t 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>