[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提供的单 ...
随机推荐
- 二叉搜索树BST(C语言实现可用)
1:概述 搜索树是一种可以进行插入,搜索,删除等操作的数据结构,可以用作字典或优先级队列.二叉搜索树是最简单的搜索树.其左子树的键值<=根节点的键值,右子树的键值>=根节点的键值. 如果共 ...
- 美团店铺数据抓取 token解析与生成
美团.点评网的token都是用一套加密算法,实际上就是个gzip压缩算法.加密了2次,第一次是加密了个sign值,然后把sign值带进去参数中进行第二次加密,最后得出token 分析请求 打开上海美食 ...
- Java自动生成数据
最近在造数据库中的表数据,写了些数据生成类 可以随机生成姓名.性别,民族,出生日期,身份证号,手机号,邮箱,身高,文化程度,地址,单位,日期时间,编码等 package com.util.create ...
- C#winfrom打开指定的文件
直接打开指定的文件 System.Diagnostics.Process.Start(v_OpenFilePath); 直接打开目录 string v_OpenFolderPath = @" ...
- Python 面向对象-下篇
面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用(可以讲多函数中公用的变量封装到对象中) 对象,根据模板创建的实例(即:对象),实 ...
- suseoj 1209: 独立任务最优调度问题(动态规划)
1209: 独立任务最优调度问题 时间限制: 1 Sec 内存限制: 128 MB提交: 3 解决: 2[提交][状态][讨论版][命题人:liyuansong] 题目描述 用2台处理机A和B处理 ...
- CSS中越界问题的经典解决方案
(1)如何解决父元素的第一个子元素的margin-top越界问题 1)为父元素加border-top: 1px;——有副作用 2)为父元素指定padding-top: 1px;——有副作用 3)为父元 ...
- Gemini.Workflow 双子工作流高级教程：数据库设计及各表作用说明
整体数据库设计,可见这一篇:Gemini.Workflow 双子工作流高级教程:数据库-设计文档 这里对各数据表进行介绍: 工作流里的设计表并不多,核心只有以下8个: 下面按照流程的顺序来介绍一下表的 ...
- 【2018寒假集训 Day2】【动态规划】回文字
回文字(palin) 问题描述: 如果一个单词从前和从后读都是一样的,则称为回文字.如果一个单词不是回文字,则可以把它拆分成若干个回文字.编程求一个给定的字母序列,最多要分割成几部分,使每一部分都回文 ...
- linux常见配置文件路径
1:/etc/sysconfig/i18n (语言配置文件). 2:/etc/sysconfig/network-scripts/ifcfg-eth0 ...