cari

Rumah >hujung hadapan web >tutorial js >Contoh terperinci pelaksanaan JS bagi tetingkap terapung pop timbul (menyokong penyeretan dan penutupan tetikus)_kemahiran javascript

Contoh terperinci pelaksanaan JS bagi tetingkap terapung pop timbul (menyokong penyeretan dan penutupan tetikus)_kemahiran javascript

WBOY
WBOYasal
2016-05-16 15:46:441501semak imbas

Contoh dalam artikel ini menerangkan cara melaksanakan tetingkap terapung pop timbul dengan JS. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Tetingkap terapung pop timbul JS yang diperkenalkan di sini menyokong penyeretan dan penutupan tetikus Selepas mengklik teks pautan, tetingkap lapisan akan muncul, yang juga dipanggil kotak dialog pop timbul.

Mengenai beberapa perihalan parameter:

kandungan badan: kandungan yang akan dipaparkan dalam tetingkap
tajuk: Tajuk tetingkap
boleh dialih keluar: Sama ada tetingkap boleh diseret

Nota: Ketinggian borang kandungan ialah ketinggian-30px. Sila hitung ketinggian dan lebar kandungan yang akan dipaparkan.

Nota: Kesan terbaik adalah di bawah Firefox atau Chrome Mungkin terdapat beberapa masalah kecil di bawah IE8.

Klik di sini untuk melihat kesan larian:

http://demo.jb51.net/js/2015/js-float-window-mousemove-codes/

Rajah kesan operasi adalah seperti berikut:

Kod khusus: 

<html>
<head>
<title>Js弹出浮动窗口，支持鼠标拖动和关闭</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
/**
关于一些参数说明：
*bodycontent:要在窗口显示的内容，dom对象
*title:窗口标题，字符串类型
*removeable:窗口能否拖动，布尔类型
*注意：内容窗体的高度是height-30px，请计算好你要显示的内容的高度和宽度。弹出窗的id为"223238909"，所以你的页面不要再取值为"223238909"的id了，以防js执行出错*/
function createdialog(width,height,bodycontent,title,removeable){
 if(document.getElementById("www_jb51_net")==null){
  /*创建窗口的组成元素*/
  var dialog = document.createElement("div");
  var dialogtitlebar= document.createElement("div");
  var dialogbody = document.createElement("div");
  var dialogtitleimg = document.createElement("span");
  var dialogtitle = document.createElement("span");
  var dialogclose = document.createElement("span");
  var closeaction = document.createElement("button");
  /*为窗口设置一个id，id如此怪异是为了尽量避免与其他用户取的id相同而出错*/
  dialog.id = "223238909";
  /*组装对话框标题栏,按从里到外的顺序组装*/
  dialogtitle.innerHTML = title;
  dialogtitlebar.appendChild(dialogtitleimg);
  dialogtitlebar.appendChild(dialogtitle);
  dialogtitlebar.appendChild(dialogclose);
  dialogclose.appendChild(closeaction);
  /*组装对话框主体内容*/
  if(bodycontent!=null){
   bodycontent.style.display = "block";
   dialogbody.appendChild(bodycontent);
  }
  /*组装成完整的对话框*/
  dialog.appendChild(dialogtitlebar);
  dialog.appendChild(dialogbody);
  /*设置窗口组成元素的样式*/
  var templeft,temptop,tempheight//窗口的位置（将窗口放在页面中间的辅助变量）
  var dialogcssText,dialogbodycssText;//拼出dialog和dialogbody的样式字符串
  templeft = (document.body.clientWidth-width)/2;
  temptop = (document.body.clientHeight-height)/2;
  tempheight= height-30;
 dialogcssText= "position:absolute;background:#65c294;padding:1px;border:4px;top:"+temptop+"px;left:"+templeft+"px;height:"+height+"px;width:"+width+"px;";
  dialogbodycssText = "width:100%;background:#ffffff;"+"height:" + tempheight + "px;";
  dialog.style.cssText = dialogcssText;
  dialogtitlebar.style.cssText = "height:30px;width:100%;background:url(images/titlebar.png) repeat;cursor:move;";
  dialogbody.style.cssText  = dialogbodycssText;
  dialogtitleimg.style.cssText = "float:left;height:20px;width:20px;background:url(images/40.gif);"+"display:block;margin:4px;line-height:20px;";
  dialogtitle.style.cssText = "font-size:16px;float:left;display:block;margin:4px;line-height:20px;";
  dialogclose.style.cssText  = "float:right;display:block;margin:4px;line-height:20px;";
  closeaction.style.cssText = "height:20px;width:24px;border-width:1px;"+"background-image:url(images/close.png);cursor:pointer;";
  /*为窗口元素注册事件*/
  var dialogleft = parseInt(dialog.style.left);
  var dialogtop = parseInt(dialog.style.top);
  var ismousedown = false;//标志鼠标是否按下
  /*关闭按钮的事件*/       
  closeaction.onclick = function(){
   dialog.parentNode.removeChild(dialog);
  }
  /*实现窗口的移动，这段代码很典型，网上很多类似的代码*/
  if(removeable == true){
   var ismousedown = false;
   var dialogleft,dialogtop;
   var downX,downY;
   dialogleft = parseInt(dialog.style.left);
   dialogtop = parseInt(dialog.style.top);
   dialogtitlebar.onmousedown = function(e){
   ismousedown = true;
   downX = e.clientX;
   downY = e.clientY;
   }
   document.onmousemove = function(e){
    if(ismousedown){
    dialog.style.top = e.clientY - downY + dialogtop + "px";
    dialog.style.left = e.clientX - downX + dialogleft + "px";
    }
   }
   /*松开鼠标时要重新计算当前窗口的位置*/
   document.onmouseup = function(){
    dialogleft = parseInt(dialog.style.left);
    dialogtop = parseInt(dialog.style.top);
    ismousedown = false;
   }
  }
  return dialog; 
 }//end if(if的结束)
}
</script>
<style>
table{background:#b2d235;}
button{font-size:12px;height:23;background:#ece9d8;border-width:1;}
#linkurl,#linkname,#savelink{width:100px;}
</style>
</head>
<body>
<!-- 显示窗口的地方 -->
<div id="here"></div><a id="clickhere" href="#">点击生成窗口</a>
<!-- 要嵌入到窗口的内容 -->
<div id="login" style="display:none;">
 <form action="#" method="post" onSubmit="return false;">
  <table width="400" height="95">
  <tr>
   <td width="78">链接文字</td>
   <td width="168"><input name="link.name" type="text"/></td>
   <td width="138" id="linktext"></td>
  </tr>
  <tr>
   <td>链接地址</td>
   <td><input name="link.url" type="text"/></td>
   <td id="linkurl"></td>
  </tr>
  <tr>
   <td></td>
   <td><button type="submit" style="float:right;">添加</button></td>
   <td id="savelink"></td>
  </tr>
  </table>
</form>
</div>
<script type="text/javascript">
var here = document.getElementById("here");
var login = document.getElementById("login");
var clickhere = document.getElementById("clickhere");
clickhere.onclick = function(){
here.appendChild(createdialog(400,95+30,login,"欢迎光临脚本之家",true));
}
</script>
</body>
</html>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bermula dengan kemahiran Grunt (pelari tugas automatik)_javascriptArtikel seterusnya：Bermula dengan kemahiran Grunt (pelari tugas automatik)_javascript

Artikel berkaitan

Lihat lagi