<!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. MySQL篇：第一章_软件安装和基本操作

    本篇安装软件Navicate Premium 16破解版和phpstudy_pro phpstudy_pro安装教程 phpstudy官网:https://www.xp.cn/download.htm ...

  2. js原生 toggle函数编写

    工作中遇到了需要动态切换slide下拉框展示与隐藏,同时需要切换元素上附加的样式,以下脚本为实现此功能的实践. //元素点击时切换隐藏与展示逻辑 var slidsDownShow = documen ...

  3. springboot、jvm调优（设置运行的参数）

    1.工具 jdk自带的工具位置: 找到窗口->应用程序 2.问题和方式 在SpringBoot项目中,调优主要通过配置文件和配置JVM的参数的方式进行. 2.1 springboot修改配置文件 ...

  4. Go语言精进之路目录

    目录 一.介绍 01.Go 语言的前生今世 二.开发环境搭建 01.Go 语言开发环境搭建 三.初识GO语言 01.Go 多版本管理工具 02.第一个 Go 程序"hello,world&q ...

  5. GPT-4 API waitlist

    Skip to main content Site Navigation GPT-4 API waitlist We're making GPT-4 available as an API for d ...

  6. ModelScope

    欢迎来到ModelScope平台!本篇文章介绍如何快速开始使用ModelScope平台上的模型,包括所需的基础概念,环境安装,模型推理和训练的快速实践示例. 如何开始# 如果你是新手,想快速体验产品, ...

  7. Appendix D. Gradle Command Line

    http://www.gradle.org/docs/current/userguide/gradle_command_line.html Appendix D. Gradle Command Lin ...

  8. C#版字节跳动SDK - SKIT.FlurlHttpClient.ByteDance

    前言 在我们日常开发工作中对接第三方开放平台,找一款封装完善且全面的SDK能够大大的简化我们的开发难度和提高工作效率.今天给大家推荐一款C#开源.功能完善的字节跳动SDK:SKIT.FlurlHttp ...

  9. 线段树(nb)

    今天刚学习了线段树,赶紧趁热打了两遍模版 下面都是线段树的基本操作,这个板子是维护的区间中的最大值,当然修改change和build包括线段树中的data可以维护区间上的不同信息. 首先介绍一下线段树 ...

  10. Lazyload 延迟加载效果（转）

    http://www.cnblogs.com/cloudgamer/archive/2010/02/01/LazyLoad.html Lazyload是通过延迟加载来实现按需加载,达到节省资源,加快浏 ...