如何使用Modal彈出Material Design Lite？

Question

我最近開始使用Google Material Design Lite的最新桌面版本，我認爲它沒有模式彈出，並且該團隊尚未在下一版本中實施它。

我試圖將bootstrap模型包括進去，但那不工作感染似乎很相當混亂，我相信與類/樣式相互衝突。

任何想法什麼會作爲替代工作良好？

感謝您的幫助。

Answer 1

我用MDL與引導，並添加data-backdrop這歸因於模態元素之後正確顯示模式：

<dialog data-backdrop="false"> 

希望它能幫助！

Answer 2

我也一直在尋找類似的插件，然後我發現MDL-jQuery的模態的對話中

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

我用這個，因爲另外一個我發現了在IE11有問題。這個工作正常。

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

這裏一個的jsfiddle：https://jsfiddle.net/w5cpw7yf/

Answer 3

我想出了一個純JavaScript解決方案這

您可以使用該按鈕的默認引導數據屬性，並確保您的按鈕和情態動詞有自己的唯一ID。

你需要有材料設計精簡版的JS使用這個JavaScript

退房的代碼之前包括在內。任何評論都歡迎。 :)

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