Modal only opens with the first button

Question

Modal only opens with the first button

Navigation

#1 by (2 votes)

1

I was reviewing the Material Design Lite library, and I have problems with the modal, I have two buttons and the modal only opens with the first, omitting the second.

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

javascript jquery material-design-lite

asked by Marcial Cahuaya Tarqui 11.09.2017 в 00:15

source

1 answer

How to apply styles to all columns? Doubt with phpMailerAutoload SERVER - CLIENT: 220 smtp.gmail.com ESMTP

score 2 · Accepted Answer

The two buttons have the same ID.

What it does: document.querySelector ('# show-dialog'); is to get only the first element with the id "show-dialog" hence, the first button.

Then with showDialogButton.addEventListener what you are saying is that when the first button is clicked the modal will open.

The id in html should be unique.

Edited:

I have added the ID #dialog to the dialog
I added the .dialog-button classes to the buttons
Through querySelectorAll I get an array with all the buttons that have the "dialog-button" class
I go through the array and I add the same "click" event to each button
Now when you click any button that has the class .dialog-button it will open the 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>