内蒙古java团队

j2se,j2ee开发组
posts - 139, comments - 212, trackbacks - 0, articles - 65
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

js弹出一个可编辑的层

Posted on 2010-04-25 22:26 帅子 阅读(236) 评论(0)  编辑  收藏 所属分类: j2ee技术专区
==========js文件===========

  function S(i){return document.getElementById(i)}

  function copyUrl(){

  var clipBoardContent=S("downloadDirect").href;

  try{

  window.clipboardData.setData("Text",clipBoardContent);

  alert("Liehuo.Net提示:复制成功!");

  }catch(e){

  alert("Liehuo.Net提示:复制失败!");

  }

  }

  //在不是连接的位置单击时,隐藏 显示的层

  document.onclick = function(evt){

  var _target = evt ? evt.target : event.srcElement ;

  var _id = _target.id;

  if( _id == "" ){

  _id = _target.tagName;

  }

  if( _id !="A"){

  S("downloadPanel").style.display = 'none';

  }

  }

  //网页载入时,绑定指定对象下的所有a

  window.onload=function(){

  var liehuo_urls=S("liehuo_urls");

  var liehuo_curls = liehuo_urls.getElementsByTagName("a");

  for(var i=0,j=liehuo_curls.length; i<j; i++){

  liehuo_curls[i].onclick=function(evt){

  var _event = evt ? evt : window.event;

  var _target = evt ? evt.target : window.event.srcElement;

  var _p = S("downloadPanel");

  _p.style.top = _event.clientY + document.body.scrollTop ;

  _p.style.left = ( _event.clientX + document.body.scrollLeft < 160 ? _event.clientX + document.body.scrollLeft + 10  : _event.clientX  + document.body.scrollLeft - 120 );

  S("downloadPanel").style.display = '';

  S("downloadDirect").href= this.href;

  return false;

  }

  }

  }

  ==============html 调用================

  <html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd">

  <script type="text/javascript" src="style/showDivJs.js"> </script>

  <style type="text/css">

  html,body{ font-size:12px;}

  a {color:#4d5d2c;text-decoration:underline;cursor:pointer;}

  .pointer {cursor:pointer;}

  .infobar {background:#fff9e3;border:1px solid #fadc80;color:#743e04;margin-bottom:10px;padding:8px 20px 4px 20px;}

  </style>

  <div id="liehuo_urls" align="center">

  <a href="javascript:void(0)">选中</a><br />

  </div>

  <div id="downloadPanel" style="position:absolute;top:0px;left:0px;width:160px;z-index:999;padding:6px 2px 6px 10px;border:1px solid #fb7;display:none;" class="infobar">

  <div style="padding:3px 0 0 0;">

  <a href="javascript:void(0)" onclick="S('downloadPanel').style.display = 'none';">关闭</a>

  </div><br />

  <center>

  <h4>经纬度编辑</h4>

  名称:<input name="name" size="10"/><br/>

  经度:<input name="longitude" size="10"/><br/>

  纬度:<input name="latitude" size="10"/><br/>

  <input type="button" value=" 提 交 " />

  </center>

  </div>

  </html>


只有注册用户登录后才能发表评论。


网站导航: