纸张对话框出现在背景中

时间:2016-05-16 15:31:55

标签: jquery ios iphone polymer-1.0 paper-dialog

我正在构建一个Polymer应用程序,在大多数页面和大多数环境中,paper-dialog都可以正常工作。但是,在iOS上,paper-dialog会一直显示在后台:

dialog in background

对话框代码如下:

        <div class="fit layout vertical center-center">
          <div class="fit layout horizontal large">
            <div class="mdl-layout mdl-js-layout">
              <main class="mdl-layout__content" on-scroll="_onTrack">
                <!-- code here is irrelevent -->
              </main>
              <paper-dialog class="interest-dialog" modal>
                  <div class="interest-form">
                    <center><h2>Interested in this job?</h2></center>
                    <paper-radio-group selected="Yes" id="interest-response">
                      <paper-radio-button class="interest-radio-button" name="Yes" value="yes">Yes, I'm interested</paper-radio-button><br />
                      <paper-radio-button class="interest-radio-button" name="Maybe" value="maybe">Maybe</paper-radio-button><br />
                      <paper-radio-button class="interest-radio-button" name="No" value="no">No, not for me</paper-radio-button>
                    </paper-radio-group>
                    <paper-input
                      type="email"
                      class="email-paper-input"
                      label="email address"
                      autofocus
                      error-message="Please input a valid email"
                      required>
                    </paper-input>
                  </div>
                  <div class="buttons">
                    <paper-button
                      class="submit-interest-button"
                      on-click="_submitInterest">
                      Submit
                    </paper-button>
                    <paper-button
                      class="dismiss-interest-button"
                      dialog-dismiss
                      on-click="_closeInterestDialog">
                      Cancel
                    </paper-button>
                  </div>
              </paper-dialog>
            </div>
          </div>
        </div>

当用户点击fab时,我正在使用jQuery打开对话框:

$('.interest-dialog')[0].open();

1 个答案:

答案 0 :(得分:0)

显然iOS以不同于其他操作系统的方式处理div。因此,重新安排一些事情会修复它并使paper-dialog出现在前景中。

       <div class="fit layout vertical center-center">
          <div class="fit layout horizontal large">
            <div class="mdl-layout mdl-js-layout">
              <main class="mdl-layout__content" on-scroll="_onTrack">
                <!-- code here is irrelevent -->
              </main>
            </div>
          </div>
        </div>
        <div>
          <paper-dialog class="interest-dialog" modal>
            <!-- dialog code here -->
          <paper-dialog>
        </div>