Question

我是Google Material Design的新手。我已经读过有关Dialog组件的内容。但我不知道如何编写代码来创建对话框只有材料设计精简版而不使用任何其他框架或插件。

现在我已经在js文件中创建了带有jquery ui的对话框。但我想将此jquery对话框样式更改为材质样式。我不知道怎么做。

Answer 1

您可以使用以下示例代码来了解有关使用mdl创建对话框的更多信息。

<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 Dialog</button>
         <dialog class="mdl-dialog">
         <h4 class="mdl-dialog__title">Delete this</h4>
         <div class="mdl-dialog__content">
             <p>
                  Do you really want to delete this??
             </p>
         </div>
         <div class="mdl-dialog__actions">
            <button type="button" class="mdl-button">Yes</button>
            <button type="button" class="mdl-button close">No</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>

如何在js中创建材质设计对话框？

1 个答案: