如何在js中创建材料设计对话框？答案

【问题标题】：how to create material design dialog box in js?如何在js中创建材料设计对话框？
【发布时间】：2016-04-02 22:44:17
【问题描述】：

我是 Google Material Design 的新手。我已经阅读了有关 Dialog 组件的信息。但我不知道如何在不使用任何其他框架或插件的情况下编写仅创建对话框的 Material Design lite 代码。

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

【问题讨论】：

jqueryscript.net/lightbox/…materializecss.com/modals.html#!希望此链接对您有所帮助！

【解决方案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>

【讨论】：