[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提供的单 ...
随机推荐
- 使用Samba服务实现文件共享
1.在虚拟机上安装Samba服务安装包 (在下载之前检查客户机与服务器是否能够ping通) (鼠标右击桌面,打开终端,测试和yum是否能够ping通,下面的命令行是我的yum的IP地址) [root@ ...
- Appium+python自动化（四十）-Appium自动化测试框架综合实践 - 代码实现（超详解）
1.简介 今天我们紧接着上一篇继续分享Appium自动化测试框架综合实践 - 代码实现.由于时间的关系,宏哥这里用代码给小伙伴演示两个模块:注册和登录. 2.业务模块封装 因为现在各种APP的层出不群 ...
- 小程序 数字过千 以K显示
先新建一个 wxs 文件 每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块. 每个模块都有自己独立的作用域.即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见. ...
- GitHub和Git
GitHub托管项目代码 首先一些基本概念: repository(仓库) 用来存放项目代码,每个项目代表一个仓库,开一个项目就意味着你有一个仓库. star(收藏) 收藏方便下次查找. fork(复 ...
- deepin 、 windows10，双系统安装
deepin . windows10,双系统安装: 首先,最好专门分一个盘用来存放deepin操作系统的安装位置(我这里分给它60个G). 1.在 http://rsync.deepin.com/de ...
- 力扣（LeetCode）翻转字符串里的单词 个人题解
给定一个字符串,逐个翻转字符串中的每个单词. 示例 1: 输入: "the sky is blue" 输出: "blue is sky the" 示例 2: 输 ...
- 力扣（LeetCode）从不订购的客户-数据库题 个人题解
SQL架构 某网站包含两个表,Customers 表和 Orders 表.编写一个 SQL 查询,找出所有从不订购任何东西的客户. Customers 表: +----+-------+ | Id | ...
- TestNg练习001
15分钟入门TestNG 阅读目录 TestNG介绍 在Eclipse中在线安装TestNG 在Eclipse中离线安装TestNg TestNG最简单的测试 TestNG的基本注解 TestNG中如 ...
- 【2018寒假集训Day 8】【最小生成树】Prim和Kruskal算法模板
Luogu最小生成树模板题 Prim 原理与dijkstra几乎相同,每次找最优的点,用这个点去松弛未连接的点,也就是用这个点去与未连接的点连接. #include<cstdio> #in ...
- Spring-boot(一)通过向导快速创建Spring-boot项目
通过向导快速创建Spring-boot项目 创建步骤: 选择Spring Initializr 填写组织和模块名 选择对应的模块 注:这里左侧的模块比较多,玩家可以根据自己的实际需要自由选择,此处暂时 ...