jquery - 等待表单提交的 Div 无法显示

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

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