简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  Detailed examples of JS implementation of pop-up floating windows (supporting mouse dragging and closing)_javascript skills

Detailed examples of JS implementation of pop-up floating windows (supporting mouse dragging and closing)_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:46:441443browse

The example in this article describes how to implement a pop-up floating window with JS. Share it with everyone for your reference. The details are as follows:

The JS pop-up floating window introduced here supports mouse dragging and closing. After clicking the link text, the layer window will pop up, which is also called a pop-up dialog box.

About some parameter descriptions:

bodycontent: the content to be displayed in the window
title: Title of the window
removeable: Whether the window can be dragged

Note: The height of the content form is height-30px. Please calculate the height and width of the content to be displayed.

Note: The best effect is under Firefox or Chrome. There may be some minor problems under IE8.

Click here to see the running effect:

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

The operation effect diagram is as follows:

Specific code: 

<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>

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Getting started with Grunt (automatic task runner)_javascript skillsNext article：Getting started with Grunt (automatic task runner)_javascript skills

Related articles

See more