有没有办法在材料设计精简版中创建对话框？答案

【问题标题】：Is there a way to create a dialog in material design lite?有没有办法在材料设计精简版中创建对话框？
【发布时间】：2016-01-14 20:28:17
【问题描述】：

我已经使用 Angular Material 创建了对话框，但到目前为止还没有找到使用 Material Design Lite 创建对话框的方法。有解决办法吗？

【问题讨论】：

标签： angularjs angular-material material-design-lite

【解决方案1】：

MDL 支持样式化 HTML5 对话框，但不包括任何 polyfills。所以你必须有一个支持它们的浏览器（比如 Chromium）。否则，请使用 @manuel-84 所指出的 https://github.com/GoogleChrome/dialog-polyfill 之类的 polyfill

<dialog id="dialog" class="mdl-dialog">
    <h4 class="mdl-dialog__title">Hello User</h4>
    <div class="mdl-dialog__content">
      <p>Hello world from dialog!<p>
    </div>
    <div class="mdl-dialog__actions">
      <button type="button" class="mdl-button close">Disagree</button>
    </div>
</dialog>

并在某处使用按钮调用

document.getElementById('dialog').showModal();

见Material Design Lite Components : Dialogs

【讨论】：

或者只使用像github.com/GoogleChrome/dialog-polyfill这样的polifyll

【解决方案2】：

我只是 MDL 的用户，不是内部人员。但是，据我了解，对话框支持不存在，但正在处理中。标记为 V1.1，但不知道可能的时间表。

https://github.com/google/material-design-lite/pull/1762

【讨论】：

【解决方案3】：

本身不是对话框，但我在一个项目中所做的是让表单向下滑动，使用 jQuery 你会得到一些不错的动画

基本上在卡片中定义表格，设置高度为零，不透明度为0。然后执行以下脚本显示对话框

           $('#objects_card_holder').animate({
                    height: 400
                },500,function(){

                    $('#objects_card_holder').animate({
                        opacity: 1
                    },100,function(){
                        $('#projectName').val('');
                    });
            });

然后当不需要表单时运行另一个脚本来隐藏它。

        $('#objects_card_holder').animate({
            opacity:0
        },
        100,
        function(){
            $('#objects_card_holder').animate({
                height:0
            },
            500,
            function(){
            });
        });

假设你的卡有 id objects_card_holder

当然，如果你真的需要一个对话框，jQuery 有它自己的对话框。见https://jqueryui.com/dialog/

【讨论】：