[TimLinux] JavaScript 模态框可拖动功能实现——原始版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Normal - Drag</title>
<style>
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(100, 100, 100, 0.5);
z-index: 2001;
} .modal-content {
position: absolute;
width: 500px;
height: 300px;
left: 50%;
margin-left: -250px;
margin-top: 100px;
border: 10px solid rgba(150, 150, 150, 0.5);
background-color: white;
text-align: center;
} .modal-title {
height: 38px;
border-bottom: 1px solid blue;
text-align: left;
padding: 0 10px;
font-weight: bold;
cursor: move;
} .modal-title div {
display: inline-block;
font-size: larger;
line-height: 2;
padding: 0 8px;
} .modal-title .modal-close {
float: right;
cursor: pointer;
} .modal-title .modal-close:hover {
background-color: rgb(198, 236, 236);
}
</style>
</head>
<body>
<div>
<p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
<p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
<p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
<p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
<p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
<p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
<p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
<p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
<p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
<p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
<p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
<p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
<p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
<p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
<p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
<p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
<p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
<p>This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. This is backend content. </p>
</div>
<div id="idModal" class="modal">
<div id="idModalDetail" class="modal-content">
<div id="idModalTitle" class="modal-title">
<div>可拖动</div>
<div class="modal-close">X</div>
</div>
<div class="modal-body">This is drag modal</div>
</div>
</div>
<script>
// 拖动时，偶发选中文本，将该选择功能禁用
function cancelUserSelect(ele) {
if (!ele) return false;
document.body.style.userSelect = 'none';
document.body.style.webkitUserSelect = 'none';
document.body.style.msUserSelect = 'none';
document.body.style.mozUserSelect = 'none'; ele.style.userSelect = 'none';
ele.style.webkitUserSelect = 'none';
ele.style.msUserSelect = 'none';
ele.style.mozUserSelect = 'none';
} // 恢复禁用的文本选择功能
function restoreUserSelect(ele) {
if (!ele) return false;
document.body.style.userSelect = 'text';
document.body.style.webkitUserSelect = 'text';
document.body.style.msUserSelect = 'text';
document.body.style.mozUserSelect = 'text'; ele.style.userSelect = 'text';
ele.style.webkitUserSelect = 'text';
ele.style.msUserSelect = 'text';
ele.style.mozUserSelect = 'text';
} function drag() {
var idModalTitle = document.getElementById('idModalTitle');
var idDragModal = idModalTitle.parentNode;
var diffLeft, diffTop, isDraging = false; idModalTitle.onmousedown = function(e) {
var e = e || window.event;
isDraging = true;
diffLeft = e.clientX - idDragModal.offsetLeft; // 鼠标离左边框的距离
diffTop = e.clientY - idDragModal.offsetTop; // 鼠标离顶部边框的距离
cancelUserSelect(idDragModal);
}; document.onmousemove = function(e) {
var e = e || window.event;
if (!isDraging) return false; if (idDragModal.style.marginLeft !== 0) {
idDragModal.style.marginLeft = 0;
} if (idDragModal.style.marginTop !== 0) {
idDragModal.style.marginTop = 0;
} // 新的鼠标离浏览器左边距离，减去鼠标离左边框的距离
var left = e.clientX - diffLeft;
// 新的鼠标离浏览器顶部距离，减去鼠标离顶部边框的距离
var top = e.clientY - diffTop; if (left < 0) {
left = 0;
} else if (left > window.innerWidth - idDragModal.offsetWidth) {
left = window.innerWidth - idDragModal.offsetWidth;
} if (top < 0) {
top = 0;
} else if (top > window.innerHeight - idDragModal.offsetHeight) {
top = window.innerHeight - idDragModal.offsetHeight;
} idDragModal.style.left = left + "px";
idDragModal.style.top = top + "px";
}; document.onmouseup = function(e) {
if (!isDraging) return false;
isDraging = false;
restoreUserSelect(idDragModal);
};
} drag();
</script>
</body>
</html>
[TimLinux] JavaScript 模态框可拖动功能实现——原始版的更多相关文章
- [TimLinux] JavaScript 模态框可拖动功能实现——jQuery版
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- [TimLinux] JavaScript 模态框可拖动功能实现——节流版
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 完美解决bootstrap模态框允许拖动后拖出边界的问题
使用bootstrap3版本 在网上看了很多方法,我觉得jquery-ui的实现方法是最简单有效的,具体实现方法 1.下载并引入jquery-ui插件 2.全局添加模态框允许拖动事件 $(docume ...
- [TimLinux] JavaScript input框的onfocus/onblur/oninput/onchange事件介绍
1. onfocus事件 input框获取到焦点时,触发了该事件,比如获取到焦点时,修改input框的背景色.这个功能其实可以使用css的伪类:focus来定义. 2. onblur事件 这个与onf ...
- BootStrap 模态框禁用空白处点击关闭问题
模态框为信息编辑窗口,涉及好多内容,填了半天,若一不小心点了空白处,那就前功尽弃了..... 所以我们很有必要禁用鼠标点击空白处模态框关闭的功能. $('#myModal').modal({backd ...
- bootstrap模态框关闭后清除模态框的数据
https://segmentfault.com/q/1010000008789123 bootstrap模态框第二次打开时如何清除之前的数据? 我用了bootstrap模态框的remote功能,在弹 ...
- Bootstrap——可拖动模态框(Model)
还是上一个小项目,o(╥﹏╥)o,要实现点击一个div或者button或者一个东西然后可以弹出一个浮在最上面的弹框.网上找了找,发现Bootstrap的Model弹出框可以实现该功能,因此学习了一下, ...
- 使用js实现显示系统当前时间并实现倒计时功能并触发模态框（遮罩）功能
常常在我们的网页中需要倒计时来触发一些函数,例如遮罩等,在本项目中,通过使用jquery,bootstrap,实现了显示系统当前时间,并且实现了倒计时的功能,倒计时实现后将会弹出模态框(遮罩层).模态 ...
- Bootstrap3.0学习教程十七：JavaScript插件模态框
这篇文章中我们主要来学习一下JavaScipt插件模态框.在学习模态框之前,我们先来了解一下JavaScript插件吧. JavaScript插件概览 插件可以单个引入(使用Bootstrap提供的单 ...
随机推荐
- python多线程总结
概述 进程与线程 进程:进程是资源(CPU.内存等)分配的最小单位,进程有独立的地址空间与系统资源,一个进程可以包含一个或多个线程 线程:线程是CPU调度的最小单位,是进程的一个执行流,线程依赖于进程 ...
- PHP判断是否关注微信公众号
PHP判断是否关注微信公众号 1 服务号直接请求这个接口https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140839 su ...
- 开始逆向objc基础准备（二）我的平台是simulator-x86_64
建项目运行中断调试,lldb中显示寄存器看到有rax-r15, stm0-stm7, xmm0-xmm15, ymm0-ymm15,即为x64体系支持sse4. 再在lldb中查看寄存器别名得到以下对 ...
- linux 6.5操作系统建立
VM上redhat enterprise linux6 ---> 使用仅主机模式网络连接 开始安装: ——>是否检查镜像:skip ——>选择语言: 中文/英文 ——>存储设备 ...
- python进程概要
进程 狭义:正在运行的程序实例. 广义:进程是一个具有一定独立功能的程序关于某个数据集合的一次运行活动,他是操作系统动态执行的基本单元. python的进程都是并行的. 并行:两个进程同时执行一起走. ...
- MAC终端中tree命令
Mac没有自带的tree命令,需要额外安装才可以,操作方法有两种: 一.用find命令模拟tree效果 1.mac下默认是没有 tree命令的,不过我们可以使用find命令模拟出tree命令的效果,如 ...
- java运算符详解
java运算符: 定义:用来指明对于操作数的运算方式 按照操作数数目分类: 单目运算 数目运算 三目运算 a++ a+b (a>b) ? ...
- 【Linux系列】Centos 7安装 Mysql8.0（五）
目的 本文主要介绍以下两点: 一. 如何安装Mysql8.0 二. Navicat连接Mysql 一. 如何安装Mysql8.0 安装Mysql有两种方式: 直接下载官方的源(比较慢) https:/ ...
- LMS自适应天线阵列设计 MATLAB
在自适应天线课上刚刚学了LMS自适应阵,先出一个抢先版贴一下结果,抢先某个小朋友一步. 关于LMS的具体介绍,直接看wiki里的吧,解释的比书上简明:传送门:https://en.wikipedia. ...
- github下载历史版本--xdd
第一步 打开一个仓库,可以看到此时在主分支下,点击1位置查看历史版本 第二步 现在可以查看到所有的版本(提交)信息,单击2位置进入该版本 第三步 单击3位置浏览并打开该版本 第四步 进入该版本之后,可 ...