Question

我有一项简单的任务但未能成功。我试图在表单提交上显示div等待但失败... 任务如下：

<script type="text/javascript">
    function ShowLoading(e) 
    {
        document.getElementById('mkdd').style.display='';
    }        

</script>

的CSS：

#mkdd
{

 display:none;
 position:fixed;
 top:0px;
 width:100%;
 height:700px;
 background-color:DarkGray;
 opacity:0.5;

}

页面设计：

<form id="form1" runat="server"  onsubmit="ShowLoading()">
<table><tr><td>
   <div id="mkdd">
       <div id="mkd" style="width:100px; height:100px;position: fixed; top: 30%; left: 40%; z-index: 5000;">
           <img width="30" height="30" src="Img/ajax-loader.gif" />
       </div>

   </div>
</td></tr></table>

</form>

它的解决方案是什么？我哪里错了？。

Answer 1

尝试将显示设置为阻止而不是将其留空：

<script type="text/javascript">
    function ShowLoading(e) 
    {
        document.getElementById('mkdd').style.display='block';
    }        
</script>

将其保留为空，您将其恢复为样式表中指定的默认值，在这种情况下为无。

供参考：What does style.display = '' actually do?

Answer 2

JS：

function ShowLoading(e) {
    document.getElementById('mkdd').style.display = 'block';
}

CSS：

#mkdd {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: DarkGray;
    opacity: 0.5;
}

HTML（大致）：

<form id="form1" runat="server" onsubmit="ShowLoading()">
    <table>
        <tr>
            <td>
               <div id="mkd">
                    <img width="30" height="30" src="Img/ajax-loader.gif" />
                </div>
            </td>
        </tr>
    </table>
</form>

<div id="mkdd"></div>

这应该在表单提交时显示深灰色叠加层。但是，因为看起来你正试图展示某种类型的AJAX预加载器，所以你的javascript缺少相当多的逻辑。

如果你正在使用jQuery： http://api.jquery.com/jquery.ajax/

如果没有，你可以参考这个帖子： Simple ajax form using javascript no jQuery

等待表格提交无法显示

2 个答案: