Jak korzystać z Modal Pop up z Material Design Lite?

Question

Niedawno zacząłem używać najnowszej wersji Google Material Design Lite na komputer. Pomyślałem, że nie ma modalnego pop-upa, a zespół nie zaimplementował go jeszcze w następnej wersji.

Próbowałem dołączyć do niego model bootstrap, ale to nie działa infekować, wydaje się być dość pomieszane, wierzę, że klasy/style ścierają się ze sobą.

Jakąkolwiek koncepcję, która sprawdzi się jako zamiennik?

Dzięki za pomoc.

Answer 1

używam MDL z bootstrap i modalna jest prawidłowo wyświetlany po dodaniu data-backdrop przypisują to do elementu modalnego:

<dialog data-backdrop="false"> 

Nadzieję, że to pomaga!

Answer 2

Ja również poszukuje podobnej wtyczki, a następnie znalazłem MDL-jquery-modal-dialog

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

użyłem tego powodu druga znalazłem mający problem na IE11. Ta działa dobrze.

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

Tutaj JSFiddle: https://jsfiddle.net/w5cpw7yf/

Answer 3

wpadłem czystym JavaScript rozwiązanie tego

Można użyć atrybutów dane domyślne bootstrap za pomocą przycisków i upewnić się, że przyciski i czasowniki modalne mieć własne unikalne identyfikatory.

Trzeba mieć JS projektowania materiałów Lite zawarte przed użyciem tej JavaScript

Sprawdź kod. Wszelkie opinie są mile widziane. :)

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