- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>提示信息框</title>
- <script src1="../js/jquery.min.js" type="text/javascript"></script>
- <style type="text/CSS">
- #massage_box {
- position: absolute;
- left: expression((body.clientWidth-350)/2);
- top: expression((body.clientHeight-200)/2);
- width:236px;
- height:118px;
- background:#91cce4;
- filter:alpha(opacity=90);
- visibility: hidden
- }
- #mask {
- position: absolute;
- top: 0;
- left: 0;
- width: expression(body.scrollWidth);
- height: expression(body.scrollHeight);
- background: #666;
- filter: ALPHA(opacity=60);
- z-index: 1;
- visibility: hidden
- }
- .massage {
- width:100%;
- height:21px;
- background:#5fc7db;
- line-height:21px;
- text-align:left;
- vertical-align:middle;
- position:relative;
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-size: 12px;
- color: #fff
- }
- .massage a{
- width:16px; height:16px; vertical-align:middle; margin-top:3px; margin-left:6px; text-indent:-999px; display:block; float:left;
- }
- .sc{
- background:url(images/info_box02.png) no-repeat;
- }
- .sc:hover{
- background:url(images/info_box02_on.png) no-repeat;
- }
- .bc{
- background:url(images/info_box03.png) no-repeat;
- }
- .bc:hover{
- background:url(images/info_box03_on.png) no-repeat;
- }
- .tj{
- background:url(images/info_box01.png) no-repeat;
- }
- .tj:hover{background:url(images/info_box01_on.png) no-repeat;}
- .massage a img{vertical-align:middle;}
- .close{
- width:21px; height:21px; position:absolute; right:0px; top:-1px; background:url(images/info_box04.png) no-repeat;text-indent:-999px; display:block;
- }
- .close:hover{ background:url(images/info_box04_on.png) no-repeat;
- }
- .info{padding-left:8px; margin-top:4px;}
- .info li{ height:20px; line-height:20px; list-style-type:none; }
- .info li.pz{ vertical-align:top; }
- .info li.pz span{ vertical-align:top; }
- .text{width:170px; height:40px;}
- .info .org{ font-weight:bold; color:#F60;}
- </style>
- <!--实现层移动-->
- <script language="javascript">
- $(function(){
- $("#massage").mousedown(
- function(event){
- var isMove = true;
- var screenW = $(document.body).width();
- var screenH = $(document.body).height();
- var abs_x = event.pageX - $('#massage_box').offset().left;
- var abs_y = event.pageY - $('#massage_box').offset().top;
- $(document).mousemove(function (event) {
- if (isMove) {
- var obj = $('#massage_box');
- var left_x = event.pageX - abs_x;
- var top_y = event.pageY - abs_y;
- if((screenW-240)<=left_x){
- left_x = screenW-240;
- }
- if((screenH-120)<=top_y){
- top_y = screenH-120;
- }
- if(left_x<0){
- left_x=20;
- }
- if(top_y<0){
- top_y=10;
- }
- obj.css({'left':left_x, 'top':top_y});
- }
- }
- ).mouseup(
- function () {
- isMove = false;
- }
- );
- }
- );
- })
- </script>
- </head>
- <body>
- <div id="massage_box">
- <div class="massage" id ="massage">
- <a class="tj" >添加</a>
- <a class="sc" >删除</a>
- <a class="bc" >保存</a>
- <span class="close" onclick="massage_box.style.visibility='hidden'; mask.style.visibility='hidden'" >关闭</span>
- </div>
- <ul class="info">
- <li>上日:<span class="org">487</span> 当日:<span class="org">610</span></li>
- <li>连续5日最高产量:<span class="org">920</span></li>
- <li class="pz"><span>批注:</span><textarea class="text"></textarea></li>
- </ul>
- </div>
- <div id="mask"></div>
- <span onclick="mask.style.visibility='visible';massage_box.style.visibility='visible'" style="cursor:hand"><a href="#">弹出</a></span>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/0106201512721.html
来源: http://www.codesnippet.cn/detail/0106201512721.html