Modal Modal 中的 Material Design 元素

Question

我们在 Cordova 应用中使用 Material Design Lite。

由于我不知道 Cordova 中 MDL 对话框的状态，我们决定使用 Modaal。

当我打开模式时，MDL 样式似乎可以工作，但输入字段不会浮动标签。我在一个普通的页面上试过这个，它似乎工作正常。

我附上了用于显示模态和模态 HTML 的代码。

注意，模态定位是一个单独的问题。

$('#add-card').modaal({
    overlay_opacity:0.5,
    overlay_close:false,
    hide_close:true,
    after_open: function(){
        componentHandler.upgradeDom();
    }
});

<div id="dialog-add-card" class="dialog">
     <h4>Add a New Card</h4>
     <p class="colour-text-light">Please enter your email address</p>
     <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
         <input class="mdl-textfield__input" type="text" id="input-settings-add-card">
         <label class="mdl-textfield__label" for="input-settings-add-card">Email</label>
     </div>

     <div class="settings-button">
         <button id="button-dialog-add-card" class="mdl-button mdl-js-button mdl-button--raised colour-bg-action colour-text-white">Add</button>
     </div>
     <br />
     <div class="settings-button-small">
         <button id="button-dialog-add-card-cancel" class="mdl-button mdl-js-button colour-text-primary">Cancel</button>
     </div>

 </div>

Answer 1

我决定使用 polyfill，一切正常。

改变它并不算太糟糕，但从一开始就使用 polyfill 会更容易。