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 会更容易。

Modal Modal 中的 Material Design 元素

Materal Design elements inside Modaal Modal

cordova

material-design-lite