<!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的更多相关文章

  1. 2000条你应知的WPF小姿势 基础篇<78-81 Dialog/Location/WPF设备无关性>

    在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师.最为出色的是他维护了两个博客:2,000ThingsYou Should Know About C# 和 2,00 ...

  2. MFC中对话框类(Dialog)的应用

    转载http://hi.baidu.com/jackywdx/item/feee8041d2c2e12310ee1e85 Windows应用程序通常是通过对话框接收用户输入.向用户输出信息,本节介绍应 ...

  3. wx.Dialog

    wx.Dialog A dialog box is a window with a title bar and sometimes a system menu, which can be moved ...

  4. MFC Dialog使用

    1. OnInitDialog 对话框初始化函数 在MFC主对话框OnInitDialog()中弹出对话框 BOOL CXXXDlg::OnInitDialog() { CDialogEx::OnIn ...

  5. Essential controls for web app

    AUTO-COMPLETE/AUTO-SUGGEST Auto-complete using Vaadin Offer auto-suggest or auto-complete to help yo ...

  6. Pyqt show和exec的区别

    Pyqt中 QDialog  show和exec的区别 QDialog的显示有两个函数show()和exec().他们的区别在参考文档上的解释如下: show():显示一个非模式对话框.控制权即刻返回 ...

  7. Microsoft Win32 to Microsoft .NET Framework API Map

    Microsoft Win32 to Microsoft .NET Framework API Map .NET Development (General) Technical Articles   ...

  8. arcmap Command

    The information in this document is useful if you are trying to programmatically find a built-in com ...

  9. Worker Thread

    http://www.codeproject.com/Articles/552/Using-Worker-Threads Introduction Worker threads are an eleg ...

  10. VC++模态对话框和非模态对话框

    MFC中有两种类型的对话框:模态对话框和非模态对话框.  模态对话框是指当其显示时,程序会暂停执行,直到关闭这个模态对话框后,才能继续执行程序中其他任务.非模态对话框是指当其显示时,允许转而执行程序中 ...

随机推荐

  1. 为不断增长的Go生态系统扩展gopls

    原文在这里. 由 Robert Findley and Alan Donovan 发布于 2023年9月8日 今年夏天初,Go团队发布了gopls的v0.12版本,这是Go语言的语言服务器,它进行了核 ...

  2. 【matplotlib基础】--3D图形

    matplotlib 在1.0版本之前其实是不支持3D图形绘制的. 后来的版本中,matplotlib加入了3D图形的支持,不仅仅是为了使数据的展示更加生动和有趣.更重要的是,由于多了一个维度,扩展了 ...

  3. Springboot项目使用Undertow替换内置Tomcat服务器，实现RESTFUL接口web应用

    Maven实例:pom.xml文件中添加更换依赖 <dependency> <groupId>org.springframework.boot</groupId> ...

  4. JDK对于Java的作用

    JDK是Java Development Kit的缩写,是Java的开发工具包(SDK).JDK 是整个 Java 的核心,包括 Java 运行环境(Java Runtime Envirnment,简 ...

  5. 4款.NET开源的Redis客户端驱动库

    前言 今天给大家推荐4款.NET开源免费的Redis客户端驱动库(以下排名不分先后). Redis是什么? Redis全称是REmote DIctionary Service,即远程字典服务.Redi ...

  6. Interesting Array 题解

    Interesting Array 题目大意 构造一个序列 \(a\),使其满足若干限制条件,每个限制条件是形如 l r q 的式子,其意义是:\(\&_{i=l}^ra_i=q\). 题意分 ...

  7. Pinely Round 2 (Div. 1 + Div. 2) (CF1863)

    本来开了某场远古 Div 1,然后学了一堆前置知识至今仍然不会 E.换一场写来得及吗? A. Channel 模拟,略. B. Split Sort Description 给你一个长度为 \(n\) ...

  8. 9.11 多校联测 Day1 总结

    我的想法是,你如果没读过题,看了这篇总结完全不能知道题面是啥,不存在泄题风险.所以不设密码力() 状态极差. 昨晚忘记定闹钟,好在早上突然想起今天考试惊醒了,rp--. 不过没有提前一个小时起来导致考 ...

  9. HarmonyOS UI 开发

    引言 HarmonyOS 提供了强大的 UI 开发工具和组件,使开发者能够创建吸引人的用户界面.本章将详细介绍在 HarmonyOS 中应用 JS.CSS.HTML,HarmonyOS 的 UI 组件 ...

  10. 比较并交换(compare and swap, CAS)

    比较并交换(compare and swap, CAS),是原子操作的一种,可用于在多线程编程中实现不被打断的数据交换操作,从而避免多线程同时改写某一数据时由于执行顺序不确定性以及中断的不可预知性产生 ...