div 可视化区域弹窗居中

效果：

css:

 1 .div_alt {
 2     position: fixed;
 3     border-radius: 5px;
 4     top: 50%;
 5     left: 50%;
 6     width: auto;
 7     min-width: 600px;
 8     min-height: 400px;
 9     height: auto;
10     background: #fff;
11     z-index: 10;
12     display: none;
13     box-shadow: 1px 1px 50px rgba(0,0,0,.3);
14 }
15
16     .div_alt .title {
17         width: 100%;
18         position: relative;
19         border-radius: 5px 0 0 0;
20         font-weight:bold;
21         text-align:center;
22         height: 45px;
23         line-height: 45px;
24         font-size: 16px;
25         border-bottom: 2px solid #00994D;
26         letter-spacing:2px;
27
28     }
29
30         .div_alt .title span {
31             display: block;
32             line-height: 60px;
33             text-align: center;
34             color: #fff;
35             font-size: 24px;
36         }
37
38     .div_alt .div_p {
39         /*padding: 20px 0;*/
40     }

html:

 1  <div id="addRoute" class="div_alt" style="display: none;">
 2             <div class="title">
 3                 添加行程
 4             </div>
 5             <div class="search">
 6                 <table style="width: 95%; margin: 0px auto;">
 7                     <tr>
 8                         <td class="name">行程主题：</td>
 9                         <td class="value">
10                             <input type="text" id="txtRouteSubject" runat="server" maxlength="50" />
11                             <span style="color: red;">&nbsp;&nbsp;*</span>
12                         </td>
13                         <td style="width: 25%"></td>
14                     </tr>
15                     <tr>
16                         <td class="name">地址：</td>
17                         <td class="value">
18                             <input type="text" id="txtRouteAddress" runat="server" maxlength="50" />
19                             <span style="color: red;">&nbsp;&nbsp;*</span>
20                         </td>
21                         <td></td>
22                     </tr>
23                     <tr>
24                         <td class="name">开始时间：</td>
25                         <td class="value"  colspan="2">
26                             <uc1:DateUC ID="ducRouteStarttime" runat="server" Width="125" ShowTime="true" />
27                             <uc1:DateUC ID="ducRouteStoptime" runat="server" Width="125" ShowTime="true" />
28                             <span style="color: red;">&nbsp;&nbsp;*</span>
29                         </td>
30                     </tr>
31                     <tr>
32                         <td class="name">内容：</td>
33                         <td class="value">
34                             <textarea runat="server" maxlength="200" id="txtRouteContent" rows="6" cols="30"></textarea>
35                             <span style="color: red;">&nbsp;&nbsp;*</span>
36                         </td>
37                         <td></td>
38                     </tr>
39                     <tr>
40                         <td colspan="3" class="tc">
41                             <input type="button" id="btnRouteSave" value="添加" />&nbsp;&nbsp;&nbsp;&nbsp;
42                         <input type="button" id="btnRouteCancel" value="返回" />
43                         </td>
44                     </tr>
45                 </table>
46                 <input type="hidden" id="routeaction" value="a" />
47             </div>
48         </div>

js:

1 function show() {
2     var $div = $(‘#addRoute‘);
3     var top = (window.outerHeight - $div.outerHeight()) / 2;
4     var left = (window.outerWidth - $div.outerWidth()) / 2;
5     $div.css({ "z-index": "1000", "top": top, "left": left }).show();
6     $(‘#div_alt_bg‘).css("z-index", "999").show();
7 }