仿东京订单中心弹出窗效果 ，效果如下
代码 ：
html
1 <table cellpadding="0" cellspacing="0" style=" padding-top:50px;">
2 <tr>
3 <td style="width: 400px;">
4 </td>
5 <td class="td-01">
6 <br />
7 <br />
8 <a href="#" class="tooltip" onmouseover="ShowUmsMessage(this, 1, 0, 4, 3, 70, 0, 22);"
9 onmouseout="CloseUmsMessage();"> 信息<s></s>
10 <div class="prompt-01" style="display: none;">
11 <div class="pc loadings" id="tracker1" >
12 <div onclick="$(this).parent().parent().hide()" class="close" >
13 关闭
14 </div>
15 <dl>
16 <dd>
17 处理信息</dd></dl>
18 <ul>
19 <li>您提交了订单，请等待系统确认 </li>
20 <li>您的订单确认汇款成功 </li>
21 <li>已签收 </li>
22 </ul>
23 </div>
24 <div class="pb pb-r">
25 <b class="b1"></b><b class="b2"></b><b class="b3"></b>
26 </div>
27 </div>
28 </a>
29 </td>
30 </tr>
31 </table>
css
1 /**lipu add 2012-3-16 **/
2 ol,ul{list-style:none;}
3 .prompt-01{border:1px solid #EDD28B;background:#FFFDEE;-webkit-box-shadow: 0 0 0 3px rgba(0,0,0,0.15);-moz-box-shadow: 0 0 0 3px rgba(0,0,0,0.15);
4 box-shadow: 0 0 0 3px rgba(0,0,0,0.15);
5 zoom:1;-moz-border-radius:1px;-webkit-border-radius:1px;
6 border-radius:1px;position:absolute;padding:9px;
7 width:342px;left:-350px;top:-39px;
8 }
9 .prompt-01 .close{float:right;cursor:pointer;color:Green; font-size:12px;}
10 .prompt-01 .pc{border:1px solid #ffe6bc;background:#fff;padding:10px;color:#333;text-align:left;min-height:235px; height:235px;zoom:1; overflow:visible}
11 .prompt-01 .pc li a{color:#333;text-decoration:none}
12 .prompt-01 .pc dl{border-bottom:1px solid #d7d6d6;line-height:16px;overflow:hidden;margin-bottom:5px}
13 .prompt-01 .pc dt{width:140px;float:left}
14 .prompt-01 .pb{top:35px;right:0}
15
16 .pb{position:absolute;}
17 .pb b{position:absolute;left:0;font-size:0;line-height:0;overflow:hidden;border:10px dashed transparent;}.pb .b1{z-index:1;}.pb .b2{z-index:2;}
18 .pb b.b3{border-width:12px;z-index:0;display:none\9;}
19 *|html[xmlns*=""] .pb b.b3 {display:none;}
20 .pb-r{right:0px;top:19px;}
21 *html .pb-r{right:-1px;}
22 .pb-r b{border-left-style:solid;}
23 .pb-r .b1{right:-11px;top:-1px;border-left-color:#EDD28B;border-width:11px;}
24 .pb-r .b2{right:-11px;border-left-color:#FFFDEE;}.pb-r .b3{top:-2px;left:4px;border-left-color:rgba(0,0,0,0.15);}
25 .pb-b{left:10px;bottom:-9px;}.pb-b b{border-top-style:solid;}.pb-b .b1{bottom:-12px;border-top-color:#EDD28B;}
26 .pb-b .b2{bottom:-11px;border-top-color:#FFFDEE;}.pb-b .b3{bottom:-19px;left:-2px;border-top-color:rgba(0,0,0,0.15);}
27 .pb-l{left:-20px;top:20px;}.pb-l b{border-right-style:solid;}.pb-l .b1{left:-1px;top:-9px;border-right-color:#EDD28B;}
28 .pb-l .b2{bottom:-11px;border-right-color:#FFFDEE;}.pb-l .b3{top:-11px;left:-8px;border-right-color:rgba(0,0,0,0.15);}
29
30 a.tooltip:link,a.tooltip:hover,a.tooltip:visited{position:relative;display:block;text-decoration:none;width:100%;z-index:2;}
31 .tooltip s{display:inline-block;line-height:0;font-size:0;height:0;overflow:hidden;vertical-align:middle; margin-left:2px;border:4px dashed;border-color:#005a9d transparent transparent;border-top-style:solid}
js
先引用jquery.
View Code
1 var ajaxPath = "http://jd2008.360buy.com/JdHome/AjaxService.aspx";
2 //var bufferTime = 1000;
3
4 //订单中心---消息
5 function ShowUmsMessage(obj, orderId, parentId, paymentType, orgId, shipment, storeid, ordertype) {
6 var curr = $(obj);
7 var wrap = "<div class='prompt-01'><div class='pc loadings' id='tracker" + orderId + "'>加载中，请稍候...</div><div class='pb pb-r'><b class='b1'></b><b class='b2'></b><b class='b3'></b></div></div>";
8 if (curr.find(".prompt-01").length == 0) {
9 // curr.append(wrap);
10 //var para = { action: "ShowUmsMessage", orderid: orderId, parentid: parentId, payment: paymentType, orgid: orgId, shipment: shipment, storeid: storeid, ordertype: ordertype };
11 GetUmsMessage(para);
12 }
13 else {
14 curr.find(".prompt-01").show();
15 }
16 };
17
18 function GetUmsMessage(para) {
19 $.ajax({
20 type: "GET",
21 url: ajaxPath,
22 data: para,
23 dataType: "jsonp",
24 cache: false,
25 success: function (result) {
26 if (result.info) {
27 var html = "<div onclick=\"$(this).parent().parent().hide()\" class='close'></div><dl><dt>处理时间</dt><dd>处理信息</dd></dl><ul>";
28 for (var i = 0; i < result.info.length; i++) {
29 var temp = result.info[i].split(",");
30 if (!temp[1]) {
31 html += "<li><div class='fore1'></div><div class='fore2'>" + temp[0] + "</div></li>"
32 }
33 else {
34 html += "<li><div class='fore1'>" + temp[0] + "</div><div class='fore2'>" + temp[1] + "</div></li>";
35 }
36 }
37 html += "</ul>";
38 $("#tracker" + para.orderid).html(html);
39 }
40 }
41 });
42 };
43
44 function CloseUmsMessage() {
45 $(".prompt-01").hide();
46 };
