onsubmit() 触发但不更改移动设备上的元素样式

Question

我试图在用户提交表单时在屏幕顶部显示模式 window。我想禁用表单（显示一些加载图标）以显示该按钮已被单击并且正在处理操作，因为有时在移动设备上它对我们的用户来说不是那么清楚

在 PC 浏览器（Firefox、IE、Opera）上一切正常，但在 Android 或 WP 8.1 div 上，提交表单后不会显示叠加层。

你知道如何解决这个问题吗？也许其他一些方法？

我的示例代码：

<script type="text/javascript">
        function ShowLoadingPanel() {
            document.getElementById('loadingPanel').style.display = 'block';
            document.getElementById('overlay').style.display = 'block'
        }
 </script>

<body>
 <div id="loadingPanel" class="loadingPanelStyle"></div>
 <div id="overlay" class="blackOverlay">    </div>
 <form id="form1" runat="server" onsubmit="return ShowLoadingPanel();">
    //some content
     <asp:Button runat="server" ID="xNext" Text="Next" OnClick="xNext_Click" />
 </form>
</body>

还有一些 CSS 模态 window

.loadingPanelStyle
{
    display: none;
    position: fixed;
    background:url(../img/load2.gif) no-repeat center center;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    font-size: small;
    z-index: 1002;
    overflow: auto;
}

.blackOverlay
{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 1001;
    -moz-opacity: 0.8;
    opacity: .80;
    filter: alpha(opacity=80);
}

Answer 1

您应该输入 .preventDefault() 以阻止表单提交

<script type="text/javascript">
            function ShowLoadingPanel(e) {
                e.preventDefault();
                document.getElementById('loadingPanel').style.display = 'block';
                document.getElementById('overlay').style.display = 'block'
                setTimeout(function(){ 
                    $(this).submit(); 
                }, 3000);
            }
     </script>

Answer 2

请试试这个。删除 javascript 并添加 jquery 函数。

$("#loadingPanel").show();

$("#overlay").show();

Answer 3

在@Velimir Tchatchevsky 的一些提示后，我找到了有效的解决方案。

function ShowLoadingPanel() {
        document.getElementById('loadingPanel').style.display = 'block';
        document.getElementById('overlay').style.display = 'block';

        setTimeout(function(){ 
            document.getElementById('form1').submit();
        }, 100);
        return false;
}

但奇怪的是，在 WP8.1 (Internet Explorer) 和 Android 4（默认浏览器）上，必须使用 setTimeout() 函数来推迟提交操作。是一些移动优化还是什么？谢谢大家的帮助！

onsubmit() 触发但不更改移动设备上的元素样式

onsubmit() fires but makes no changes to element style on mobile

html

javascript

asp.net

android

windows-phone-8