Modeless dialog in html

发布时间：2024年01月15日
<!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>
文章来源:https://blog.csdn.net/Computer_Tech/article/details/135579851
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章