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中有两种类型的对话框:模态对话框和非模态对话框. 模态对话框是指当其显示时,程序会暂停执行,直到关闭这个模态对话框后,才能继续执行程序中其他任务.非模态对话框是指当其显示时,允许转而执行程序中 ...
随机推荐
- 领域驱动模型DDD（四）——Eventuate Tram Saga源码讲解
前言 虽然本人一直抱怨<微服务架构设计模式>中DDD模式下采用的Eventuate Tram Saga不算简单易用,但是为了更加深入了解原文作者的设计思路,还是花了点时间去阅读源码,并且为 ...
- 《Docker到Kubernetes容器运维实战》简介
#好书推荐##好书奇遇季#<Docker到Kubernetes容器运维实战>已经出版.本书帮助读者系统掌握Docker与K8s运维技能. 本书内容 本书分两部分系统介绍Docker与K ...
- 通过 Haproxy 实现 ss 负载均衡
介绍 缺点:所有的SS的加密方式和密码必须一致 介绍:HAProxy是一个使用C语言编写的自由及开放原始码软件,其提供高可用性.负载均衡,以及基于TCP和HTTP的应用程序代理. 安装Haproxy ...
- 20个最佳实践提升Terraform工作流程｜Part 1
Terraform 是管理基础设施及代码(IaC)最常用的工具之一,它能使我们安全且可预测地对基础设施应用更改.刚开始上手 Terraform 可能会感觉有些不容易,但很快就能对该工具有基本的了解,随 ...
- 深入理解RocketMQ 广播消费
这篇文章我们聊聊广播消费,因为广播消费在某些场景下真的有奇效.笔者会从基础概念.实现机制.实战案例.注意事项四个方面一一展开,希望能帮助到大家. 1 基础概念 RocketMQ 支持两种消息模式:集群 ...
- 【好玩】如何在github主页放一条贪吃蛇
前言 缘由 github放小蛇,就问你烧不烧 起因看到大佬github上有一条贪吃蛇扭来扭去,觉得好玩,遂给大家分享一下本狗的玩蛇历程 成果初展 贪吃蛇 访问地址 https://github.com ...
- 数据重整：用Java实现精准Excel数据排序的实用策略
摘要:本文由葡萄城技术团队原创并首发.转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 前言 在数据处理或者数据分析的场景中,需要对已有的数据进行排序,在Ex ...
- 是因为不同的浏览器内核吗--Could not register service workers到底是怎么回事
什么是浏览器内核 浏览器内核(Rendering Engine),是浏览器最核心的部分. 它负责处理网页的HTML.CSS.JavaScript等代码,并将其转化为可视化的网页内容.即我们常说的对网页 ...
- Pandas 读取 Excel 斜着读
读取 Excel 斜着读数据 import pandas as pd def read_sideling(direction, sheet_name, row_start, col_start, ga ...
- C#基数排序算法
前言 基数排序是一种非比较性排序算法,它通过将待排序的数据拆分成多个数字位进行排序. 实现原理 首先找出待排序数组中的最大值,并确定排序的位数. 从最低位(个位)开始,按照个位数的大小进行桶排序,将元 ...