Web Front-end
JS Tutorial
JS implements draggable and closeable pop-up window effects_javascript skills
JS implements draggable and closeable pop-up window effects_javascript skills
The example in this article describes the implementation of draggable and closeable pop-up window effects using JS. Share it with everyone for your reference. The details are as follows:
Run this example, click on the text, and a window will pop up. It is actually a pop-up layer. This pop-up layer can be dragged with the mouse. In addition, the example demonstrates the specific code for pop-up text layer and pop-up picture layer using this method. Please select according to your choice. Use it.
The screenshot of the running effect is as follows:
The online demo address is as follows:
http://demo.jb51.net/js/2015/js-draw-close-able-alert-dlg-demo/
The specific code is as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>弹出层、弹窗效果+拖曳功能 </title>
<style type="text/css">
*{ margin:0px; padding:0px;}
body{ font-size:12px; font:Arial, Helvetica, sans-serif; margin:25PX 0PX; background:#eee;}
.botton{ color:#F00; cursor:pointer;}
.mybody{width:600px; margin:0 auto; height:1500px; border:1px solid #ccc; padding:20px 25px; background:#fff}
#cwxBg{ position:absolute; display:none; background:#000; width:100%; height:100%; left:0px; top:0px; z-index:1000;}
#cwxWd{ position:absolute; display:none; border:10px solid #CCC; padding:10px;background:#FFF; z-index:1500;}
#cwxCn{ background:#FFF; display:block;}
.imgd{ width:400px; height:300px;}
</style>
</head>
<body>
<!--弹出窗-->
<div class="mybody">
<div class="botton" id="testClick">点击测试</div>
asdasdasdasdasdasdasd<br/>这里是一段文字哦！<div class="botton" id="testClick1">点击测试</div>
</div>
<script type="text/javascript">
C$('testClick').onclick = function(){
var neirong = '<div><img src="http://www.jb51.net/images/logo.gif" class="imgd" /></div>';
cwxbox.box.show(neirong);
}
C$('testClick1').onclick = function(){
var neirong = '123456789132456789';
cwxbox.box.show(neirong,3);
}
function C$(id){return document.getElementById(id);}
//定义窗体对象
var cwxbox = {};
cwxbox.box = function(){
var bg,wd,cn,ow,oh,o = true,time = null;
return {
show:function(c,t,w,h){
if(o){
bg = document.createElement('div'); bg.id = 'cwxBg';
wd = document.createElement('div'); wd.id = 'cwxWd';
cn = document.createElement('div'); cn.id = 'cwxCn';
document.body.appendChild(bg);
document.body.appendChild(wd);
wd.appendChild(cn);
bg.onclick = cwxbox.box.hide;
window.onresize = this.init;
window.onscroll = this.scrolls;
o = false;
}
if(w && h){
var inhtml = '<iframe src="'+ c +'" width="'+ w +'" height="'+ h +'" frameborder="0"></iframe>';
}else{
var inhtml = c;
}
cn.innerHTML = inhtml;
oh = this.getCss(wd,'offsetHeight');
ow = this.getCss(wd,'offsetWidth');
this.init();
this.alpha(bg,50,1);
this.drag(wd);
if(t){
time = setTimeout(function(){cwxbox.box.hide()},t*1000);
}
},
hide:function(){
cwxbox.box.alpha(wd,0,-1);
clearTimeout(time);
},
init:function(){
bg.style.height = cwxbox.page.total(1)+'px';
bg.style.width = '';
bg.style.width = cwxbox.page.total(0)+'px';
var h = (cwxbox.page.height() - oh) /2;
wd.style.top=(h+cwxbox.page.top())+'px';
wd.style.left=(cwxbox.page.width() - ow)/2+'px';
},
scrolls:function(){
var h = (cwxbox.page.height() - oh) /2;
wd.style.top=(h+cwxbox.page.top())+'px';
},
alpha:function(e,a,d){
clearInterval(e.ai);
if(d==1){
e.style.opacity=0;
e.style.filter='alpha(opacity=0)';
e.style.display = 'block';
}
e.ai = setInterval(function(){cwxbox.box.ta(e,a,d)},40);
},
ta:function(e,a,d){
var anum = Math.round(e.style.opacity*100);
if(anum == a){
clearInterval(e.ai);
if(d == -1){
e.style.display = 'none';
if(e == wd){
this.alpha(bg,0,-1);
}
}else{
if(e == bg){
this.alpha(wd,100,1);
}
}
}else{
var n = Math.ceil((anum+((a-anum)*.5)));
n = n == 1 ? 0 : n;
e.style.opacity=n/100;
e.style.filter='alpha(opacity='+n+')';
}
},
getCss:function(e,n){
var e_style = e.currentStyle ? e.currentStyle : window.getComputedStyle(e,null);
if(e_style.display === 'none'){
var clonDom = e.cloneNode(true);
clonDom.style.cssText = 'position:absolute; display:block; top:-3000px;';
document.body.appendChild(clonDom);
var wh = clonDom[n];
clonDom.parentNode.removeChild(clonDom);
return wh;
}
return e[n];
},
drag:function(e){
var startX,startY,mouse;
mouse = {
mouseup:function(){
if(e.releaseCapture)
{
e.onmousemove=null;
e.onmouseup=null;
e.releaseCapture();
}else{
document.removeEventListener("mousemove",mouse.mousemove,true);
document.removeEventListener("mouseup",mouse.mouseup,true);
}
},
mousemove:function(ev){
var oEvent = ev||event;
e.style.left = oEvent.clientX - startX + "px";
e.style.top = oEvent.clientY - startY + "px";
}
}
e.onmousedown = function(ev){
var oEvent = ev||event;
startX = oEvent.clientX - this.offsetLeft;
startY = oEvent.clientY - this.offsetTop;
if(e.setCapture)
{
e.onmousemove= mouse.mousemove;
e.onmouseup= mouse.mouseup;
e.setCapture();
}else{
document.addEventListener("mousemove",mouse.mousemove,true);
document.addEventListener("mouseup",mouse.mouseup,true);
}
}
}
}
}()
cwxbox.page = function(){
return{
top:function(){return document.documentElement.scrollTop||document.body.scrollTop},
width:function(){return self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth},
height:function(){return self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight},
total:function(d){
var b=document.body, e=document.documentElement;
return d?Math.max(Math.max(b.scrollHeight,e.scrollHeight),Math.max(b.clientHeight,e.clientHeight)):
Math.max(Math.max(b.scrollWidth,e.scrollWidth),Math.max(b.clientWidth,e.clientWidth))
}
}
}()
</script>
</body>
</html>
I hope this article will be helpful to everyone’s JavaScript programming.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
How to turn off the ads recommended by 360 Browser? How to turn off ads recommended by 360 Browser on PC?
Mar 14, 2024 am 09:16 AM
How to turn off the ads recommended by 360 Browser? I believe that many users are using 360 Browser, but this browser sometimes pops up advertisements, which makes many users very distressed. Let this site carefully introduce to users how to Turn off the ads recommended by 360 Browser on your computer. How to turn off the ads recommended by 360 Browser on your computer? Method 1: 1. Open 360 Safe Browser. 2. Find the "three horizontal bars" logo in the upper right corner and click [Settings]. 3. Find [Lab] in the taskbar on the left side of the pop-up interface, and check [Enable "360 Hotspot Information" function]. Method 2: 1. First double-click
How to turn off Sina News Express? How to turn off the express function?
Mar 12, 2024 pm 09:46 PM
Sina News software provides a lot of news headline information, which is basically pushed by the official platform. The content of each news article is authentic. You can swipe up and down to search and browse with one click, making the overall reading atmosphere more comfortable. Enter your mobile phone number to log in online. News channels in different fields are open. The 24-hour updates are not repeated. There is no shortage of domestic, foreign and local current affairs news. Swipe up and down to select one-click browsing. The news content is all If you are interested, you can also turn off the news express function, so that it will not be affected. You can open it at any time and preview the massive hot news headlines. Now the editor will provide details to Sina News users online. Operation steps of express delivery function. Find Sina News and click on the lower right corner
What should I do if there are no pop-up reminders for calendar events in Win10? How to recover if calendar event reminders are gone in Win10
Jun 09, 2024 pm 02:52 PM
The calendar can help users record your schedule and even set reminders. However, many users are asking what to do if calendar event reminders do not pop up in Windows 10? Users can first check the Windows update status or clear the Windows App Store cache to perform the operation. Let this site carefully introduce to users the analysis of the problem of Win10 calendar event reminder not popping up. To add calendar events, click the "Calendar" program in the system menu. Click the left mouse button on a date in the calendar. Enter the event name and reminder time in the editing window, and click the "Save" button to add the event. Solving the problem of win10 calendar event reminder not popping up
Detailed explanation of how to turn off Windows 11 Security Center
Mar 27, 2024 pm 03:27 PM
In the Windows 11 operating system, the Security Center is an important function that helps users monitor the system security status, defend against malware, and protect personal privacy. However, sometimes users may need to temporarily turn off Security Center, such as when installing certain software or performing system tuning. This article will introduce in detail how to turn off the Windows 11 Security Center to help you operate the system correctly and safely. 1. How to turn off Windows 11 Security Center In Windows 11, turning off the Security Center does not
Recommended: Excellent JS open source face detection and recognition project
Apr 03, 2024 am 11:55 AM
Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side
How to close password-free payment in Kuaishou Kuaishou tutorial on how to close password-free payment
Mar 23, 2024 pm 09:21 PM
Kuaishou is an excellent video player. The password-free payment function in Kuaishou is very familiar to everyone. It can be of great help to us in daily life, especially when purchasing the goods we need on the platform. Okay, let’s go and pay. Now we have to cancel it. How can we cancel it? How can we effectively cancel the password-free payment function? The method of canceling password-free payment is very simple. The specific operation methods have been sorted out. Let’s go through it together. Let’s take a look at the entire guide on this site, I hope it can help everyone. Tutorial on how to close password-free payment in Kuaishou 1. Open the Kuaishou app and click on the three horizontal lines in the upper left corner. 2. Click Kuaishou Store. 3. In the options bar above, find password-free payment and click on it. 4. Click to support
Detailed explanation of how to turn off real-time protection in Windows Security Center
Mar 27, 2024 pm 02:30 PM
As one of the operating systems with the largest number of users in the world, Windows operating system has always been favored by users. However, when using Windows systems, users may encounter many security risks, such as virus attacks, malware and other threats. In order to strengthen system security, Windows systems have many built-in security protection mechanisms, one of which is the real-time protection function of Windows Security Center. Today, we will introduce in detail how to turn off real-time protection in Windows Security Center. First, let's
How can I turn on the private message mode when the other party in the TikTok private message has turned off the private message mode? Can I see if the person I send a private message to has turned off the private message mode?
Mar 28, 2024 am 08:01 AM
Douyin is a popular short video social platform that allows users to simply record their lives and share their happiness. The private messaging function plays an important role in Douyin and is one of the main ways for users to interact with each other. Sometimes, users may encounter a situation where the other party has turned off the private message mode, resulting in the inability to send messages. 1. How can I turn on the private message mode if the other party in the Douyin private message has turned off the private message mode? 1. Confirm whether the other party has enabled privacy settings. First, we should confirm whether the other party has enabled privacy settings, which may have restricted the reception of private messages. If they have settings that only allow private messages from acquaintances, we can try to contact them through other means, such as through mutual friends or interactions on social media platforms. 2. Send a friend request. If the other party has not turned on privacy settings, then we
