it-swarm.asia

Modal Pop up Material Design Lite ile nasıl kullanılır?

Kısa bir süre önce Google Material Design Lite’ın en yeni Masaüstü sürümünü kullanmaya başladım, bir modal popülasyonu olmadığını ve ekibin bir sonraki sürüm için henüz uygulamadığını düşündüm.

Önyükleme modelini buna dahil etmeye çalıştım, ancak çalışma enfeksiyonu oldukça karışık görünüyor, birbirleriyle çakışan sınıflara/stillere inanıyorum.

Herhangi bir fikir bir yedek olarak ne işe yarayacak ??

Yardımınız için teşekkürler.

9
foo-baar

Ben de benzer bir eklenti arıyordum ve sonra buldum mdl-jquery-modal-dialog

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

Bunu kullandım çünkü bulduğum diğeri IE11'de sorun yaşıyordu. Bu iyi çalışıyor.

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

İşte bir JSFiddle: https://jsfiddle.net/w5cpw7yf/

7
Suyash

Bunun için saf bir JavaScript Çözümü buldum

Düğmeler için varsayılan önyükleme verisi niteliklerini kullanabilir ve düğmelerinizin ve modallarınızın kendi benzersiz kimlikleri olduğundan emin olun.

Bu JavaScript'i kullanmadan önce Material Design Lite’ın JS’ine sahip olmanız gerekir.

Kodu kontrol et. Herhangi bir yorum bekliyoruz. :)

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

MDL'yi bootstrap ile kullanıyorum ve modal elemanına data-backdrop niteliği ekledikten sonra model doğru görüntüleniyor:

<dialog data-backdrop="false">

Umarım yardımcı olur!

0
HomerBailon