0

在此处输入图像描述

我有一个 web 应用程序，其中出现在特定页面上的对话框但是由于某种原因它格式错误。例如，请参见下面的链接

似乎是因为这些代码行显示了加载动画。

JS：

//show loading screen before pagehide
$(document).on('pagebeforehide', '[data-role="page"]',function(e,data){  
 var loader = setInterval(function(){
  $.mobile.loading('show');
  clearInterval(loader);
 },1); 
}); 

//hide loading screen on pageshow
$(document).on('pageshow', '[data-role="page"]',function(e,data){  
 var loader = setInterval(function(){
  $.mobile.loading('hide');
  clearInterval(loader);
 },1); 
});  

$(document).on('pagebeforeshow', '[data-role="dialog"]',function(e,data){  
 var loader = setInterval(function(){
  $.mobile.loading('hide');
  clearInterval(loader);
 },1); 
});

当我改变

$(document).on('pagebeforeshow', '[data-role="dialog"]',function(e,data)

至

$(document).on('pageshow', '[data-role="dialog"]',function(e,data)

格式错误的对话框显示片刻，然后恢复正常。

HTML：

<div data-role="dialog" id="loginPage" data-close-btn="none">
 <div data-role="header">
 <img src="./images/Chune-Logo-white-logo.png" alt="logo" style="margin-left: auto; margin-right: auto; display: block;"></div>

 <div data-role="content">    
  <form id="loginForm">
  <div data-role="fieldcontain" class="ui-hide-label">
   <label for="username">Username:</label>
   <input type="text" name="username" id="username" value="" placeholder="Username" />
  </div>
  <div data-role="fieldcontain" class="ui-hide-label">
   <label for="password">Password:</label>
   <input type="password" name="password" id="password" value="" placeholder="Password" /></div>
  <input type="submit" value="Login" id="submitButton">
  </form>
  <div style="text-align: center;">Or</div> <!--need to center-->
  <a href="./register.html" data-role="button">Register</a>
 </div>
 <div data-role="footer">
  <h4>&copy; CHUNE</h4>
 </div>
</div>

如何阻止此对话框和其他对话框在小屏幕设备上出现格式错误，因为它在台式机和笔记本电脑上显示正常。

4

0 回答 0