C#遮罩层

首先写一个遮罩层DIV，如下  （放在body标签里）

<div class="loagMask" id="loading" runat="server">
        <div class="sn-mask-loading fixedLoading"></div>
</div>

 

在css里面写好css在aspx页面调用（最下面是我用的css样式）

<link href="css/a_002.comm.css" rel="stylesheet" />

最关键的就是调用了（在单击事件isSubmit()最后调用show就可以了）

<asp:Button ID="btnSave" class="btn btn-primary" runat="server" Text="保存" OnClientClick="return isSubmit()" OnClick="btnSave_Click" />

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

 

css样式：（用到的用，用不到的删除就好了，按照class找一下loagMask）
/* jdf-1.0.0/ ui-base.css Date:2015-09-25 09:37:09*/
    a,address,b,big,blockquote,body,center,cite,code,dd,del,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,i,iframe,img,ins,label,legend,li,ol,p,pre,small,span,strong,u,ul,var {
    margin:0;
    padding:0
}
 html,body{min-width:1200px;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
    display:block
}
hr {
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    height:0
}
button,html input[type=button],input[type=submit] {
    -webkit-apperance:button;
    cursor:pointer
}
input[type=text] {
padding:3px 2px;
border: solid 1px #d0d0d0;
}
input.itxtmid[type="text"] {
    width: 70px;
}
textarea {
border-color:#ccc;}

/*因修改购物车而加，不知是否影响其他*/
input[type=text].itxt { 
    /*width:30px;text-align:right ; padding:3px 5px*/ }

select {
padding:3px 2px 4px;
border: solid 1px #d0d0d0;
 font: 12px/150% "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB","宋体",sans-serif;
    color: #666;
}
 .mt select.seltype {
height:27px;}

button[disabled],html input[disabled] {
    cursor:default
}
/*和搜索框一样的高度*/
/*.mod-comm .search  input,*/
.mod-comm .search input {
    vertical-align:top;}

/*.mod-comm*/
 .search  input[type=text] {  
    height: 20px;
    line-height: 18px;
    padding: 2px 5px 3px;
    border: 1px solid #ccc;
  
}
 
.mod-comm .mt  input[type=text] { 
    /*height: 20px;*/ 
}
.extra-r {
float:right;}
.mt .search select {
    margin: 0 1px;
     height: 27px; 
     line-height: 27px; 
}
.mt .search span {vertical-align:middle;  display:inline-block; *margin-bottom:8px;
 
}
ol,ul {
    list-style:none
}
img {
    border:0;
    vertical-align:middle
}
em,i,u {
    font-style:normal
}

.fl {
    float:left
}
.fr {
    float:right
}
.al {
    text-align:left
}
.ac {
    text-align:center
}
.ac em {
    color:#f50

}
.ar {
    text-align:right;
}
.fw {
font-weight:bold;}
.ml5 {
margin-left:5px}
.mr5 {
margin-right:5px;}
.ml10 {
margin-left:10px;}
.mb10 {
margin-bottom:10px;}
.ml20 {
margin-left:20px;}
.mt10 {
margin-top:10px;}
.pd20 {
padding:20px;}
.pd10 {
padding:10px;}
.mr10 {
margin-right:10px;}
.hide {
    display:none
}
/*.clear,.clr {
    display:block;
    overflow:hidden;
    clear:both;
    height:0;
    line-height:0;
    font-size:0
}*/
.clr {
    display:block;
    overflow:hidden;
    clear:both; 
} 
.clearfix:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden
}
.clearfix {
    *zoom:1
}
.tablehover tr:hover{
background: #f5f5f5;
}
.dorpdown {
    position:relative
}
.dorpdown-layer {
    display:none;
    position:absolute
}
.dorpdown:hover .dorpdown-layer,.hover .dorpdown-layer {
    display:block
}
.cw-icon {
    position:relative;
    cursor:default;
    zoom:1
}
.cw-icon .i,.cw-icon i {
    display:block;
    position:absolute;
    overflow:hidden
}
.w {
    width:990px;
    margin:0 auto
}
.root61 .w {
    width:1210px
}
body,input {
    font:12px/150% "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB","宋体",sans-serif;
    color:#666;
    background:#fff
}
table td {
   font:12px/150% "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB","宋体",sans-serif;
    color:#666;
}
.table {
}
a {
    color:#666;
    text-decoration:none
}
a:hover {
    color: #c81623;
} 
.m,.mb,.mc,.mt,.p-detail,.p-img,.p-market,.p-name,.p-price,.sm,.smb,.smc,.smt {
    overflow:hidden
}
.img-error {
    background:url(../images/error-img.jpg) no-repeat 50% 50%
}
.btd {
border-top:dashed 1px #ccc;width:100%  }
 
/*警告底色*/
.noteyellow {
background:#ffffac}
/* jdf-1.0.0/ global-header.css Date:2015-11-26 19:49:18*/
    @charset "UTF-8";
    #logo-2014 {
    position:relative;
    z-index:12;
    float:left;
    width:362px;
    height:60px;
    padding:20px 0
}
.borderline {margin:10px 0px;
border-top:dotted 1px #e4393c;}
#logo-2014 .logo {
    display:block;
    width:270px;
    height:60px;
 
    text-indent:-20000px
}
#logo-2014 .extra {
    position:absolute;
    top:15px;
    left:168px;
    width:180px;
    height:70px;
    padding-left:10px;
    background:#fff
}
#channel {
    float:left;
    margin-right:10px;
    cursor:default;
    font:400 20px/70px "microsoft yahei";
    color:#333
}
#categorys-mini-main {
    display:none;
    border:1px solid #ccc;
    position:absolute;
    width:152px;
    padding:13px;
    margin-top:-1px;
    background:#fff;
    overflow:hidden
}
#categorys-mini-main h3 {
    font-family:"Microsoft YaHei";
    color:#666;
    line-height:24px;
    font-size:14px;
    font-weight:400
}
#categorys-mini-main a {
    color:#666;
    padding:0;
    font-size:12px
}
#categorys-mini {
    float:left;
    color:#666;
    font-size:12px;
    font-weight:400;
    position:relative;
    padding-top:22px;
    height:27px;
    font-family:simsun
}
#categorys-mini .cw-icon {
    color:#ccc;
    position:relative;
    width:63px;
    height:25px;
    border:1px solid #ccc;
    line-height:25px;
    z-index:1;
    background:#fff;
    padding:0 5px
}
#categorys-mini .cw-icon h2 {
    font-family:"Microsoft YaHei";
    color:#666;
    font-size:12px;
    font-weight:400
}
#categorys-mini .cw-icon i {
    top:9px;
    right:5px;
    height:7px;
    font:400 15px/15px consolas
}
#categorys-mini .cw-icon s {
    position:relative;
    top:-7px;
    text-decoration:none
}
#categorys-mini .loading {
    display:block;
    height:50px;
    background:url(../images/loading.gif) no-repeat center center
}
#categorys-mini .dorpdown-layer {
    width:150px;
    border:1px solid #ccc;
    padding:10px;
    background:#fff
}
#categorys-mini .ci-right {
    top:8px;
    right:7px;
    height:7px;
    overflow:hidden;
    font:400 15px/15px consolas;
    color:#6A6A6A;
    transition:transform .1s ease-in 0s;
    -webkit-transition:-webkit-transform .1s ease-in 0s;
    display:block;
    position:absolute
}
#categorys-mini.hover .cw-icon {
    border-bottom:0
}
#categorys-mini.hover .ci-right {
    transform:rotate(180deg);
    -webkit-transform:rotate(180deg)
}
 
#hotwords-2014 {
    float:left;
    width:462px;
    height:20px;
    line-height:20px;
    overflow:hidden
}
#hotwords-2014 a {
    float:left;
    white-space:nowrap;
    margin-right:10px
}
#shelper {
    overflow:hidden;
    position:absolute;
    top:36px;
    left:0;
    width:379px;
    border:1px solid #CCC;
    background:#fff
}
#shelper li {
    overflow:hidden;
    padding:1px 6px;
    line-height:22px;
    cursor:pointer
}
#shelper .search-item {
    float:left;
    width:190px;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden
}
#shelper li.fore1 .search-item {
    width:170px
}
#shelper .search-count {
    overflow:hidden;
    color:#aaa;
    text-align:right;
    *zoom:1
}
#shelper .close {
    border-top:1px solid #efefef;
    text-align:right
}
#shelper .item3 {
    cursor:default
}
#shelper .item3 a {
    float:left;
    margin-right:10px;
    white-space:nowrap
}
#shelper li.fore1 {
    width:100%;
    padding:0;
    border-bottom:1px solid #ddd
}
#shelper li.fore1 .item1 {
    height:22px;
    overflow:hidden;
    zoom:1
}
#shelper li.fore1 div.fore1 {
    padding:0 6px
}
#shelper li.fore1 strong {
    color:#C00
}
#shelper li.fore1 .fore1 strong {
    color:#333
}
#shelper li.fore1 .item1,#shelper li.fore1 .item2 {
    float:none;
    width:auto;
    padding:1px 6px 1px 20px
}
#shelper li.fore1 .item3 {
    float:none;
    width:auto;
    color:#9C9A9C
}
#shelper li.fore1 span {
    float:left
}
#shelper li.close:hover,#shelper li.fore1:hover {
    background:0 0
}
#shelper li.fore1 div:hover {
    background:#f5f5f5!important
}
#shelper li.brand-search {
    border-bottom:1px solid #ddd;
    font-family:Microsoft YaHei
}
#shelper li.brand-search .info {
    color:#e4393c;
    margin-bottom:2px
}
#shelper li.brand-search .bs-item