2016-05-16 16 views
0

我正在構建聚合物應用程序,並且在大多數頁面上以及在大多數環境中,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> 

,我使用jQuery的,當用戶點擊打開對話框晶圓廠:

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

回答

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>