सामग्री डिजाइन लाइट के साथ मॉडल पॉप अप का उपयोग कैसे करें?

Question

मैंने हाल ही में Google Material Design Lite के नवीनतम डेस्कटॉप संस्करण का उपयोग करना शुरू किया, मुझे लगा कि इसमें एक मॉडल पॉप अप नहीं है और टीम ने इसे अभी तक अगली रिलीज के लिए लागू नहीं किया है।

मैंने बूटस्ट्रैप मॉडल को इसमें शामिल करने का प्रयास किया है, लेकिन यह काम नहीं कर रहा है, यह संक्रमित नहीं है, मैं कक्षाओं/शैलियों को एक दूसरे के साथ संघर्ष कर रहा हूं।

कोई विचार क्या प्रतिस्थापन के रूप में अच्छा काम करेगा ??

आपकी मदद के लिए धन्यवाद।

Answer 1

मैं बूटस्ट्रैप साथ एमडीएल का उपयोग करें और मोडल data-backdrop मोडल तत्व को यह विशेषता जोड़ने के बाद सही ढंग से प्रदर्शित होता है:

<dialog data-backdrop="false"> 

आशा है कि यह मदद करता है!

Answer 2

मैं भी एक समान प्लगइन के लिए देख रहा था और उसके बाद मैं एमडीएल-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

मैं इस

के लिए एक शुद्ध जावास्क्रिप्ट समाधान के साथ आया था आप बटन के लिए डिफ़ॉल्ट बूटस्ट्रैप डेटा विशेषताओं का उपयोग कर सकते हैं और यह सुनिश्चित कर लें कि आपके बटन और क्रियार्थ द्योतक अपनी अनूठी आईडी है।

आप सामग्री डिज़ाइन लाइट के जे एस कोड बाहर इस जावास्क्रिप्ट

चेक उपयोग करने से पहले शामिल की आवश्यकता है। किसी भी समीक्षा का स्वागत है। :)

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