Modeless dialog in html

关注

原创最新推荐文章于 2026-11-07 16:55:43 发布 1k 阅读 AI 写同款· GEO 优化 ›

Pandas入门教程（十四）：数据导出全攻略——CSV、Excel、JSON、HTML、Markdown 与大数据量优化分析结果需要输出才能产生价值。本文系统讲解 Pandas 的导出能力，详解 CSV 编码处理、Excel 多 Sheet 与格式化、JSON 多种 orient、HTML/Markdown/LaTeX 文档输出，并针对百万行数据给出分块、压缩、Parquet 等优化方案，帮你按场景选对导出格式。阅读详情

<!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>