modeless dialog in html
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可拖拽非模态对话框</title>
<style>
.dialog {
display: none;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 8px;
box-shadow: 0 10px 20px rgba(0, 0, 0, .3);
z-index: 9999;
opacity: 0.65;
}
.dialog-header {
background-color: #88c3ff;
padding: 10px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
cursor: move;
}
.dlgtitle {
/* font-weight: bold; */
font-size: 16px;
color: chartreuse;
}
.dialog-content {
background-color: #c2d6ee;
padding: 20px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
</style>
</head>
<body>
<button id="openBtn">打开对话框</button>
<div id="dialog" class="dialog close-btn">
<div class="dialog-header">
<span class="dlgtitle">This page say:</span>
</div>
<div class="dialog-content">
<p>请选择一篇博客进行编辑</p>
</div>
</div>
<script>
var dialog = document.getElementById('dialog');
var openBtn = document.getElementById('openBtn');
var bodypage = document.getElementsByTagName('html');
var closeBtn = document.querySelector('.close-btn');
var isDragging = false;
var mouseX, mouseY, dialogLeft, dialogTop;
// 鼠标按下时记录鼠标位置以及对话框位置
dialogHeaderMouseDown = function (e) {
isDragging = true;
mouseX = e.clientX;
mouseY = e.clientY;
dialogLeft = dialog.offsetLeft;
dialogTop = dialog.offsetTop;
}
// 鼠标移动时移动对话框
// document.onmousemove = function(e) {
dialogHeaderMouseMove = function (e) {
if (isDragging) {
var moveX = e.clientX - mouseX;
var moveY = e.clientY - mouseY;
dialog.style.left = dialogLeft + moveX + 'px';
dialog.style.top = dialogTop + moveY + 'px';
}
}
// 鼠标松开时停止拖动
// document.onmouseup = function() {
dialogHeaderMouseup = function () {
isDragging = false;
}
// 点击打开按钮显示对话框
openBtn.onclick = function () {
dialog.style.display = 'block';
}
// 点击关闭按钮或对话框外部关闭对话框
closeBtn.onclick = function () {
dialog.style.display = 'none';
}
bodypage[0].onclick = function (e) {
if(e.target!==dialog){
if(e.target!==openBtn){
dialog.style.display = 'none';
}
}
console.log("body is clicked");
}
dialog.onclick = function (e) {
if (e.target == dialog) {
dialog.style.display = 'none';
}
}
// 鼠标按下对话框头部，开始拖动对话框
var header = document.querySelector('.dialog-header');
header.addEventListener('mousedown', dialogHeaderMouseDown);
header.addEventListener('mousemove', dialogHeaderMouseMove);
header.addEventListener('mouseup', dialogHeaderMouseup);
</script>
</body>
</html>
modeless dialog in html的更多相关文章
- 2000条你应知的WPF小姿势 基础篇<78-81 Dialog/Location/WPF设备无关性>
在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师.最为出色的是他维护了两个博客:2,000ThingsYou Should Know About C# 和 2,00 ...
- MFC中对话框类(Dialog)的应用
转载http://hi.baidu.com/jackywdx/item/feee8041d2c2e12310ee1e85 Windows应用程序通常是通过对话框接收用户输入.向用户输出信息,本节介绍应 ...
- wx.Dialog
wx.Dialog A dialog box is a window with a title bar and sometimes a system menu, which can be moved ...
- MFC Dialog使用
1. OnInitDialog 对话框初始化函数 在MFC主对话框OnInitDialog()中弹出对话框 BOOL CXXXDlg::OnInitDialog() { CDialogEx::OnIn ...
- Essential controls for web app
AUTO-COMPLETE/AUTO-SUGGEST Auto-complete using Vaadin Offer auto-suggest or auto-complete to help yo ...
- Pyqt show和exec的区别
Pyqt中 QDialog show和exec的区别 QDialog的显示有两个函数show()和exec().他们的区别在参考文档上的解释如下: show():显示一个非模式对话框.控制权即刻返回 ...
- Microsoft Win32 to Microsoft .NET Framework API Map
Microsoft Win32 to Microsoft .NET Framework API Map .NET Development (General) Technical Articles ...
- arcmap Command
The information in this document is useful if you are trying to programmatically find a built-in com ...
- Worker Thread
http://www.codeproject.com/Articles/552/Using-Worker-Threads Introduction Worker threads are an eleg ...
- VC++模态对话框和非模态对话框
MFC中有两种类型的对话框:模态对话框和非模态对话框. 模态对话框是指当其显示时,程序会暂停执行,直到关闭这个模态对话框后,才能继续执行程序中其他任务.非模态对话框是指当其显示时,允许转而执行程序中 ...
随机推荐
- Content Security Policy(CSP)应用及说明
什么是CSP CSP全称Content Security Policy ,可以直接翻译为内容安全策略,说白了,就是为了页面内容安全而制定的一系列防护策略. 通过CSP所约束的的规责指定可信的内容来源( ...
- 关于Unity 如何与Blazor Server结合
关于Unity 如何与Blazor Server结合 一.介绍 最近工作中有`Unity`与`Blazor Server`结合的需求,在网上找了一圈,发现这方面的资料比较少,特此写下这篇记录一下自己的 ...
- Redis系列之——使用常见问题
文章目录 一 子进程开销和优化 二 fork操作 三 aof追加阻塞 一 子进程开销和优化 1 cpu 开销:rdb和aof文件生成,属于cpu密集型 优化:不做cpu绑定,不和cpu密集型的服务一起 ...
- Vue源码学习(九):响应式前置:实现对象的依赖收集(dep和watcher)
好家伙,这是目前为止最绕的一章,也是十分抽象的一章 由于实在太过抽象,我只能用一个不那么抽象的实例去说服我自己 完整代码已开源https://github.com/Fattiger4399/ana ...
- [NOI2014] 字符串（题解）
字符串(题解) 题目描述 近日,园长发现动物园中好吃懒做的动物越来越多了.例如企鹅,只会卖萌向游客要吃的.为了整治动物园的不良风气,让动物们凭自己的真才实学向游客要吃的,园长决定开设算法班,让动物们学 ...
- [转载]R2: 已解释和未解释的方差
估计值的方差与总体方差之间的差异就是回归方程对方差的解释率.试举一例,如图 1,身高与体重的回归线显示身高与体重之间呈正相关,Mr. Y身高76英寸体重220磅(图 1中插图.cdr的红点),他与体重 ...
- JavaScript 语法：运算符号
作者:WangMin 格言:努力做好自己喜欢的每一件事 JavaScript要进行各种各样的运算,就要使用不同的运算符号. JavaScript 算数运算符 算数运算符用于对数字执行算数运算,分别有以 ...
- 文心一言 VS 讯飞星火 VS chatgpt （130）-- 算法导论11.2 2题
二.用go语言,对于一个用链接法解决冲突的散列表,说明将关键字 5,28,19,15,20,33,12,17,10 插入到该表中的过程.设该表中有 9 个槽位,并设其散列函数为 h(k)=k mod ...
- [Jetson Nano]SSH连接Jetson Nano时出现Xlib: extension NV-GLX missing on display localhost:10.0
解决SSH连接Jetson Nano时遇到的"Xlib: extension "NV-GLX" missing on display 'localhost:10.0'&q ...
- 暴力+DP：买卖股票的最佳时机
给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 如果你最多只允许完成一笔交易(即买入和卖出一支股票一次),设计一个算法来计算你所能获取的最大利润. 注意:你不能在买入股票前卖出股票. ...