jquery Dialog弹窗最大最小化

最新推荐文章于 2024-07-30 03:21:47 发布

指尖的余香

最新推荐文章于 2024-07-30 03:21:47 发布

阅读量2.9k

点赞数 2

分类专栏： jquery javascript 文章标签： jquery dialog

本文链接：https://blog.csdn.net/qq_16126621/article/details/85164144

版权

jquery 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

创建Dialog js代码

  $("#").createDialog({
            autoOpen: false,
            zIndex: 3999,
            width: 680,
            height: 600,
            buttons:{
                "保存" : function() {
                    $("#monthPlanForm").submit();
                    $("#monthlyPlanGrid").trigger("reloadGrid");
                },
                "取消" : function() {
                    $(this).dialog("close");
               }
            },
            open: function (event, ui) {
                var $dialog = $(this);
                var atext = $(".ui-dialog-titlebar-close").replaceWith(
                        '<p class="ui-xlgwr"> '+
                            '<span class="ui-icon ui-icon-maxthick" title="最大化">max</span>'+
                            '<span class="ui-icon ui-icon-resetthick" title="还原">reset</span>'+
                            '<span class="ui-icon ui-icon-closethick" title="关闭">close</span>'+
                        '</p>'
                );
                var myw = document.body.clientWidth;   //定义一个myw，接受到当前全屏的宽
                var myh = document.body.clientHeight;  //定义一个myw，接受到当前全屏的高
                var initwidth = $dialog[0].parentNode.clientWidth;  
                var initheight = $dialog[0].parentNode.clientHeight;
                var initTop = $dialog[0].parentNode.style.top;  
                var initLeft =  $dialog[0].parentNode.style.left;  
                $(".ui-xlgwr>span")["1"].style.display = "none";
                $(".ui-xlgwr>span").click(function () {
                    var spantext = $(this).text();
                    if (spantext == "max") {  //最大化
                        $dialog.dialog({
                            position: ['left', 'top'],
                            width: myw,
                            height: myh
                        }); 
                        $(".ui-xlgwr>span")["0"].style.display = "none";
                        $(".ui-xlgwr>span")["1"].style.display = "block";
                    } else if (spantext == "reset") { 
                         $dialog.dialog({
                            width: initwidth,
                            height: initheight
                         });   
                         $dialog[0].parentNode.style.top = initTop;
                         $dialog[0].parentNode.style.left = initLeft;
                         $(".ui-xlgwr>span")["0"].style.display = "block";
                         $(".ui-xlgwr>span")["1"].style.display = "none";
                    } else if (spantext == "close") {
                        $dialog.dialog("close");
                    } else {
                        alert("请选择正确的图标,谢谢.");
                    }
                });
            },
            close: function () {
                $(".loadmessage").hide();
            }
            
        });

样式

<style>
   p.ui-xlgwr .ui-icon{ position:relative; float: left; margin:1.5em 0.5em 0 0.5em; cursor: pointer; z-index:999;}
   p.ui-xlgwr{ position:absolute; top:-10px; padding:0; right:0; display:inline;}
</style>