JS實現(xiàn)彈出浮動窗口(支持鼠標(biāo)拖動和關(guān)閉)實例詳解

更新時間：2015年08月06日 11:53:40 作者：皮蛋

這篇文章主要介紹了JS實現(xiàn)彈出浮動窗口,可支持鼠標(biāo)拖動和關(guān)閉的功能,界面美觀大方,涉及javascript動態(tài)創(chuàng)建對話框的相關(guān)技巧,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)彈出浮動窗口。分享給大家供大家參考。具體如下：

這里介紹的JS彈出浮動窗口，支持鼠標(biāo)拖動和關(guān)閉，點擊鏈接文字后彈出層窗口，也稱作是彈出式對話框吧。

關(guān)于一些參數(shù)說明：

bodycontent:要在窗口中顯示的內(nèi)容
title:窗口的標(biāo)題
removeable:窗口是否能拖動

注意：內(nèi)容窗體的高度是height-30px，請計算好要顯示的內(nèi)容高度和寬度。

注:在火狐或chrome下效果最佳，IE8下可能有些小問題。

點擊此處查看運行效果：

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

運行效果圖如下：

具體代碼：

<html>
<head>
<title>Js彈出浮動窗口，支持鼠標(biāo)拖動和關(guān)閉</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
/**
關(guān)于一些參數(shù)說明：
*bodycontent:要在窗口顯示的內(nèi)容，dom對象
*title:窗口標(biāo)題，字符串類型
*removeable:窗口能否拖動，布爾類型
*注意：內(nèi)容窗體的高度是height-30px，請計算好你要顯示的內(nèi)容的高度和寬度。彈出窗的id為"223238909"，所以你的頁面不要再取值為"223238909"的id了，以防js執(zhí)行出錯*/
function createdialog(width,height,bodycontent,title,removeable){
 if(document.getElementById("www_jb51_net")==null){
  /*創(chuàng)建窗口的組成元素*/
  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");
  /*為窗口設(shè)置一個id，id如此怪異是為了盡量避免與其他用戶取的id相同而出錯*/
  dialog.id = "223238909";
  /*組裝對話框標(biāo)題欄,按從里到外的順序組裝*/
  dialogtitle.innerHTML = title;
  dialogtitlebar.appendChild(dialogtitleimg);
  dialogtitlebar.appendChild(dialogtitle);
  dialogtitlebar.appendChild(dialogclose);
  dialogclose.appendChild(closeaction);
  /*組裝對話框主體內(nèi)容*/
  if(bodycontent!=null){
   bodycontent.style.display = "block";
   dialogbody.appendChild(bodycontent);
  }
  /*組裝成完整的對話框*/
  dialog.appendChild(dialogtitlebar);
  dialog.appendChild(dialogbody);
  /*設(shè)置窗口組成元素的樣式*/
  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;//標(biāo)志鼠標(biāo)是否按下
  /*關(guān)閉按鈕的事件*/       
  closeaction.onclick = function(){
   dialog.parentNode.removeChild(dialog);
  }
  /*實現(xiàn)窗口的移動，這段代碼很典型，網(wǎng)上很多類似的代碼*/
  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";
    }
   }
   /*松開鼠標(biāo)時要重新計算當(dāng)前窗口的位置*/
   document.onmouseup = function(){
    dialogleft = parseInt(dialog.style.left);
    dialogtop = parseInt(dialog.style.top);
    ismousedown = false;
   }
  }
  return dialog; 
 }//end if(if的結(jié)束)
}
</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>
<!-- 要嵌入到窗口的內(nèi)容 -->
<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>

希望本文所述對大家的javascript程序設(shè)計有所幫助。

您可能感興趣的文章: