2

Estuve revisando la librería Material Design Lite, y tengo problemas con el modal, tengo dos botones y el modal solo abre con la primera, omitiendo al segundo.

                            
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
</head>
<body>
 <button id="show-dialog" type="button" class="mdl-button">Show Confirmation Box</button>
  <button id="show-dialog" type="button" class="mdl-button">Show Confirmation Box</button>
  <dialog class="mdl-dialog">
    <h4 class="mdl-dialog__title">Confirm</h4>
    <div class="mdl-dialog__content">
      <p>
        If You delete your messages it can't be undone. Please Confirm to Proceed?
      </p>
    </div>
    <div class="mdl-dialog__actions">
	  <button type="button" class="mdl-button">Confirm</button>
      <button type="button" class="mdl-button close">Cancel</button>
    </div>
  </dialog>
  <script>
    var dialog = document.querySelector('dialog');
    var showDialogButton = document.querySelector('#show-dialog');
    if (! dialog.showModal) {
      dialogPolyfill.registerDialog(dialog);
    }
    showDialogButton.addEventListener('click', function() {
      dialog.showModal();
    });
    dialog.querySelector('.close').addEventListener('click', function() {
      dialog.close();
    });
  </script>
</body>
</html>                                 

1 respuesta 1

2

Los dos botones tienen la misma ID.

Lo que hace: document.querySelector('#show-dialog'); es obtener sólo el primer elemento con la id "show-dialog" por lo tanto, el primer botón.

A continuación con showDialogButton.addEventListener lo que le estás diciendo es que cuando el primer botón sea pulsado pues se abrirá el modal.

Las id en html deberían ser unicas.


Editado:

  • He añadido la ID #dialog al dialog
  • He añadido las clases .dialog-button a los botones
  • Mediante querySelectorAll obtengo un array con todos los botones que tengan la clase "dialog-button"
  • Recorro el array y a cada botón le añado el mismo evento "click"
  • Ahora cuando hagas cualquier click a algún botón que tenga la clase .dialog-button abrirá el modal

<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
  <script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
</head>

<body>

  <button type="button" class="mdl-button dialog-button">Show Confirmation Box</button>
  <button type="button" class="mdl-button dialog-button">Show Confirmation Box</button>

  <dialog class="mdl-dialog" id="dialog">
    <h4 class="mdl-dialog__title">Confirm</h4>
    <div class="mdl-dialog__content">
      <p>
        If You delete your messages it can't be undone. Please Confirm to Proceed?
      </p>
    </div>
    <div class="mdl-dialog__actions">
      <button type="button" class="mdl-button">Confirm</button>
      <button type="button" class="mdl-button close">Cancel</button>
    </div>
  </dialog>

  <script>
    var dialogButton = document.querySelectorAll('.dialog-button');
    var dialog = document.querySelector('#dialog');
    if (!dialog.showModal) {
      dialogPolyfill.registerDialog(dialog);
    }

    fLen = dialogButton.length;
    for (i = 0; i < fLen; i++) {
      dialogButton[i].addEventListener('click', function() {
        dialog.showModal();
      });
    }

    dialog.querySelector('.close').addEventListener('click', function() {
      dialog.close();
    });
  </script>
</body>

</html>

3
  • Si, pero que pasa cuando recibo los N botones, no puedo crear howDialogButton2 para cada botón. Gracias Commented el 10 sept. 2017 a las 22:41
  • Lo que trato de hacer es solo un modal que identifique el ID. Commented el 10 sept. 2017 a las 22:46
  • He editado el código, mira si esto es lo que quieres
    – Garu
    Commented el 11 sept. 2017 a las 0:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.