Question

当用户提交表单时，我正试图在屏幕顶部显示一个模态窗口。我想禁用表单（显示一些加载图标）以显示已单击按钮并正在处理操作，因为有时在移动设备上我们的用户不太清楚

在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

.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

在得到@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（）函数来推迟提交操作。它是一些移动优化还是什么？谢谢大家的帮助！

Answer 2

您应该.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 3

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

{{1}}

onsubmit（）会触发但不会更改移动设备上的元素样式

3 个答案: