登录
当前位置： 首页 > 工具软件 > JQuery showDialog > 使用案例 >

Jquery实现浮动窗口的放大还原，各方位拉伸

邓正谊
2023-12-01

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no, email=no"/>
    <meta name="msapplication-tap-highlight" content="no">
    <title>dialog demo</title>
    <link href="base.css" rel="stylesheet" type="text/css">
    <script src="jQuery/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="main.js" type="text/javascript"></script>
</head>
<body>
    <input id="btn_show_dialog" type="button" value="show dialog" class="btn" style="margin-left:50px; margin-top:100px"/>
    <!--弹出框-->
    <div id="dialog" class="dialog hide" minheight="320" minwidth="660">
        <!--弹窗-->
        <div id="dlg_top" class="dlg_top">
                <img class="dlg_logo" src="img/logo.1.png"/>
                <label class="dlg_title">弹出窗口</label>                
                <input class="dlg_btn_close dlg_btn_ico " type="button" value="关闭"/>                
                <input class="dlg_btn_ico dlg_btn_max_top" type="button" value="放大"/>
        </div>
        <div class="dlg_content">
            <label style="display:inline-block; margin:10px;line-height:26px;">运用BIM具有的数据共享、方便协调管理等优点，设计和开发了信息系统。该系统提供了施工图纸方案展示、模型预览、文件管理、用户权限模块，提高了建筑信息的集成化和信息的共享，为相关的建筑利益方提供了一个信息共享与交换的平台。</label>
        </div>
        <div class="dlg_bottom">
            <input id="dlg_submit" class="btn" type="button" value="提交" />
            <input class="dlg_btn_close btn" type="button" value="关闭" />
        </div>
        <div id="dlg_right"></div>
        <div id="dlg_right_bottom"></div>
        <div id="dlg_bottom"></div>
    </div>
</body>

CSS代码块

* {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-size: 14px;
    padding: 0;
    margin: 0;
    border: 0;
    list-style-type: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
img {
    border: none;
    vertical-align: middle;
}
.hide {
    display: none;
}
.left {
    float: left;
}
/* 一般按钮 */
.btn {
    cursor: pointer;
    color:pink;
    border-color: #417FC8;
    background: -moz-linear-gradient(top,#4a90e2 0,#4a90e2 100%);
    background: -webkit-linear-gradient(top,#4a90e2 0,#4a90e2 100%);
    background: -o-linear-gradient(top,#4a90e2 0,#4a90e2 100%);
    background: -ms-linear-gradient(top,#4a90e2 0,#4a90e2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A90E2', endColorstr='#4A90E2', GradientType=0);
    background: linear-gradient(top,#4a90e2 0,#4a90e2 100%);
    border-radius: 3px;
    height: 28px;
    line-height: 28px;
    padding: 0px 10px;
}
/* 弹窗 */
.dialog {
    width: 50%;
    position: absolute;
    top: 10%;
    left: 20%;
    z-index: 2;
    background:wheat;
    border-radius: 3px;
    border: 1px solid #eec;
}
/* 弹窗上部 */
.dlg_top {
    position: relative;
    height: 28px;
    z-index: 3;
    background: brown;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom: 1px solid #eec;
    cursor: move;
}
/* 弹窗右上角 ico */
.dlg_btn_ico {
    float: right;
    background:#417FC8;
    background-size: cover;
    width: 40px;
    height: 20px;
    cursor: pointer;
    margin-right: 15px;
    margin-top: 5px;
    background-repeat: no-repeat;
}
/* 弹窗右上角 ico 鼠标浮上去的样式 */
.dlg_btn_ico:hover {
    background-color:pink;
}
/* 最小化 */
/* .dlg_btn_min_top {
    background-image: url(../images/ico_min.png);
} */
/* 最大化 */
/*.dlg_btn_max_top {
    background-image: url(/img/logo.1.png);
}*/
/* 还原 */
/*.dlg_btn_reback_top {
    background-image: url(/img/logo.1.png);
}*/
/* 关闭 */
/*.dlg_btn_close_top {
    background-image: url(/img/logo.1.png);
}*/
/* 左上角logo */
.dlg_logo {
    margin-left: 5px;
    margin-top: -3px;
    width: 20px;
    height: 20px;
    display: inline-block; 
    vertical-align: middle;
}
/* 弹窗标题 */
.dlg_title {
    line-height: 28px;
    margin-left: 5px;
}
/* 弹窗内容 */
.dlg_content {
    position: relative;
    min-height: 300px;
    overflow-y: auto;
    margin-right: 4px;
}
/* 弹窗底部 */
.dlg_bottom {
    position: absolute;
    height: 35px;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 3;
    padding-top: 5px;
    background: #f3f3f3;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top: 1px solid #eec;
    text-align: center;
}
/* 缩放时右拉块 */
#dlg_right {
    width: 15px;
    height: 100%;
    float: right;
    position: absolute;
    right: 0;
    top: 0;
    cursor: e-resize;
    overflow: hidden;
    opacity: 0;
    z-index: 3;
}
/* 缩放时下拉块 */
#dlg_bottom {
    width:100%;
    height:15px;
    position:absolute;
    left:0;
    bottom:0;
    cursor:n-resize;
    overflow:hidden;
    opacity:0;
    z-index:3;
}
/* 缩放时右下拉块 */
#dlg_right_bottom{
    width:15px;
    height:15px;
    position:absolute;
    right:0;
    bottom:0;
    cursor:nw-resize;
    overflow:hidden;
    font-size:12px;
    text-align:center;
    line-height:15px;
    float:right;
    z-index:4;
}

JS代码块

// 最大化时保存弹窗的位置大小
var preDialogWidth = 0; 
var preDialogHeight = 0;
var preDialogLeft = "0px";
var preDialogTop = "0px";
// 页面初始化
$(function () {
    // 常用功能
    $("#btn_show_dialog").bind("click", showDialog);
    $(".dlg_btn_close").bind("click", hideDialog);    
    $("#dlg_submit").bind("click", submitHandler);

    // 移动
    $("#dialog").bind("mousedown", moveHandler);

    // 最大化 || 还原
    $(".dlg_btn_max_top").bind("click", maxDialog);
    $(".dlg_btn_reback_top").bind("click", rebackDialog);
});

// 还原
function rebackDialog() {
    el_dialog = $("#dialog")[0];
    el_dialog.style.left = preDialogLeft;
    el_dialog.style.top = preDialogTop;
    el_dialog.style.width = preDialogWidth + "px";
    el_dialog.style.height = preDialogHeight + "px";

    $(this).blur();//失去焦点的时候执行
    $(this).removeClass("dlg_btn_reback_top").addClass("dlg_btn_max_top");
    $(".dlg_btn_max_top").unbind("click").bind("click", maxDialog);
}
// 最大化
function maxDialog() {
    el_dialog = $("#dialog")[0];
    preDialogWidth = el_dialog.offsetWidth;//底
    preDialogHeight = el_dialog.offsetHeight;//高
    preDialogLeft = el_dialog.style.left;//左
    preDialogTop = el_dialog.style.top;//顶
    el_dialog.style.left = 0 + "px";
    el_dialog.style.top = 0 + "px";
    el_dialog.style.width = window.innerWidth - 5 + "px";
    el_dialog.style.height = window.innerHeight - 5 + "px";
    $(this).blur();
    $(this).removeClass("dlg_btn_max_top").addClass("dlg_btn_reback_top"); 
    $(".dlg_btn_reback_top").unbind("click").bind("click", rebackDialog);  //unbind移除事件处理器
}
// 移动
function moveHandler(evt) {
    var $trgt = $(event.target);
    //console.log( typeof ($trgt));
    if (!$trgt.hasClass("dlg_top")) return;
//返回空，是一个检验
    var $this = $(this);
    var el = $this[0];
    //兼容浏览器
    var oevent = evt || event;
    var distanceX = oevent.clientX - el.offsetLeft;
    var distanceY = oevent.clientY - el.offsetTop;
    $("#dlg_top").bind("mousemove", function (evt) {
        var oevent = evt || event;
        el.style.left = oevent.clientX - distanceX + 'px';
        el.style.top = oevent.clientY - distanceY + 'px';
    });
    $("#dlg_top").bind("mouseup", function () {
        $("#dlg_top").unbind("mousemove");
        $("#dlg_top").unbind("mouseup");
    });
}
// 显示弹窗
function showDialog() {
    $("#dialog").show();
}
// 隐藏弹窗
function hideDialog() {
    $("#dialog").hide();
}
// 提交事件
function submitHandler() {
    alert("成功提交");
}
// 拖拽缩放：支持右拉 || 下拉 || 右下拉
window.onload = function () {
    var el_dlg_right_bottom = document.getElementById("dlg_right_bottom");
    var el_dialog = document.getElementById("dialog");
    var minHeight = $(el_dialog).attr("minheight");
    var minWidth = $(el_dialog).attr("minwidth");
    var right = document.getElementById("dlg_right");
    var bottom = document.getElementById("dlg_bottom");
    var mouseStart = {};
    var divStart = {};
    var rightStart = {};
    var bottomStart = {};
    // drag from right
    right.onmousedown = function (ev) {
        var oEvent = ev || event;
        mouseStart.x = oEvent.clientX;
        mouseStart.y = oEvent.clientY;
        rightStart.x = right.offsetLeft;
      /*  if (right.setCapture) {//事件绑定
            right.onmousemove = doDragToRightBottomToRight;
            right.onmouseup = stopDragToRightBottomToRight;
            right.setCapture();
        }
        else {*/
            document.addEventListener("mousemove", doDragToRightBottomToRight, true);
            document.addEventListener("mouseup", stopDragToRightBottomToRight, true);
      // }
    };
    function doDragToRightBottomToRight(ev) {
        var oEvent = ev || event;
        var l = oEvent.clientX - mouseStart.x + rightStart.x;//为什么需要这样不能直接写rightstar.x
       // var w = l + el_dlg_right_bottom.offsetWidth;
        //if (w < el_dlg_right_bottom.offsetWidth) {
         //   w = el_dlg_right_bottom.offsetWidth;
        //}
       // else if (w > document.documentElement.clientWidth - el_dialog.offsetLeft) {
         //   w = document.documentElement.clientWidth - el_dialog.offsetLeft - 2;
       // }
        if (l < minWidth) 
        return;
        el_dialog.style.width = l + "px";
    };
    function stopDragToRightBottomToRight() {
       /* if (right.releaseCapture) {
            right.onmousemove = null;
            right.onmouseup = null;
            right.releaseCapture();
        }
        else {*/
            document.removeEventListener("mousemove", doDragToRightBottomToRight, true);
           // document.removeEventListener("mouseup", stopDragToRightBottomToRight, true);
       // }
    };
    // drag from bottom
    bottom.onmousedown = function (ev) {
        var oEvent = ev || event;
        mouseStart.x = oEvent.clientX;
        mouseStart.y = oEvent.clientY;
        bottomStart.y = bottom.offsetTop;
      /*  if (bottom.setCapture) {
            bottom.onmousemove = doDragToRightBottomToBottom;
            bottom.onmouseup = stopDragToRightBottomToBottom;
            bottom.setCapture();
        }
        else {*/
            document.addEventListener("mousemove", doDragToRightBottomToBottom, true);
            document.addEventListener("mouseup", stopDragToRightBottomToBottom, true);
       // }
    };
    function doDragToRightBottomToBottom(ev) {
        var oEvent = ev || event;
        var t = oEvent.clientY - mouseStart.y + bottomStart.y;
        //var h = t + el_dlg_right_bottom.offsetHeight;
        /*if (h < el_dlg_right_bottom.offsetHeight) {
            h = el_dlg_right_bottom.offsetHeight;
        }
        else if (h > document.documentElement.clientHeight - el_dialog.offsetTop) {
            h = document.documentElement.clientHeight - el_dialog.offsetTop - 2;
        }*/
        if (t < minHeight) return;
        el_dialog.style.height = t + "px";
    };
    function stopDragToRightBottomToBottom() {
       /* if (bottom.releaseCapture) {
            bottom.onmousemove = null;
            bottom.onmouseup = null;
            bottom.releaseCapture();
        }
        else {*/
            document.removeEventListener("mousemove", doDragToRightBottomToBottom, true);
          //  document.removeEventListener("mouseup", stopDragToRightBottomToBottom, true);
        //}
    };
    // drag from right bottom
    el_dlg_right_bottom.onmousedown = function (ev) {
        var oEvent = ev || event;
        mouseStart.x = oEvent.clientX;
        mouseStart.y = oEvent.clientY;
        divStart.x = el_dlg_right_bottom.offsetLeft;
        divStart.y = el_dlg_right_bottom.offsetTop;
      /* if (el_dlg_right_bottom.setCapture) {
            el_dlg_right_bottom.onmousemove = doDragToRightBottom;
            el_dlg_right_bottom.onmouseup = stopDragToRightBottom;
            el_dlg_right_bottom.setCapture();
        }
        else {*/
            document.addEventListener("mousemove", doDragToRightBottom, true);
            document.addEventListener("mouseup", stopDragToRightBottom, true);
     //   }
    };
    function doDragToRightBottom(ev) {
        var oEvent = ev || event;
        var l = oEvent.clientX - mouseStart.x + divStart.x;
        var t = oEvent.clientY - mouseStart.y + divStart.y;
       // var w = l + el_dlg_right_bottom.offsetWidth;
       // var h = t + el_dlg_right_bottom.offsetHeight;
       /* if (w < el_dlg_right_bottom.offsetWidth) {
            w = el_dlg_right_bottom.offsetWidth;
        }
        else if (w > document.documentElement.clientWidth - el_dialog.offsetLeft) {
            w = document.documentElement.clientWidth - el_dialog.offsetLeft - 2;
        }
        if (h < el_dlg_right_bottom.offsetHeight) {
            h = el_dlg_right_bottom.offsetHeight;
        }
        else if (h > document.documentElement.clientHeight - el_dialog.offsetTop) {
            h = document.documentElement.clientHeight - el_dialog.offsetTop - 2;
        }*/
        if (l < minWidth) return;
        el_dialog.style.width = l + "px";
        if (t < minHeight) return;
        el_dialog.style.height = t + "px";
    };
    function stopDragToRightBottom() {
       // if (el_dlg_right_bottom.releaseCapture) {
        //    el_dlg_right_bottom.onmousemove = null;
        //    el_dlg_right_bottom.onmouseup = null;
        //    el_dlg_right_bottom.releaseCapture();
       // }
       // else {
            document.removeEventListener("mousemove", doDragToRightBottom, true);
           // document.removeEventListener("mouseup", stopDragToRightBottom, true);
       // }
    };    
};

以上代码摘与某位大神，并且做了局部修改 有需要的用户可以拿去用 谢谢

 类似资料：

相关阅读

jQuery实现的Div窗口震动效果实例jQuery窗口拖动功能的实现代码jQuery图片特效插件Revealing实现拉伸放大jQuery实现页面滚动时智能浮动定位jquery实现浮动的侧栏实例

相关文章

Flink-窗口-Windowionic 浮动框ER图还原成表ionic 模态窗口货拉拉java实习

相关问答

harmonyos - 如何根据组件内容大小修改浮动窗口?如何以编程方式启用自动启动和浮动窗口权限Apache Flink：窗口还原函数永远不会执行如何在红移中实现窗口化的运行中位数？使用react更改缩放/缩放后调整窗口上的svg位置

相关文档

各种算法的 Python 实现方案如何实现自己的 jQuery基于 Node.js 的 HTTPS MITM 中间人代理的原理和实现常用算法实现方法大数据实验手册
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.