效果：
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=" 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;"> *</span> 12 </td> 13 <td style=" 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;"> *</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;"> *</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;"> *</span> 36 </td> 37 <td></td> 38 </tr> 39 <tr> 40 <td colspan="3" class="tc"> 41 <input type="button" id="btnRouteSave" value="添加" /> 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 }