fast admin 全局修改弹窗大小

最新推荐文章于 2024-08-13 09:24:46 发布
最新推荐文章于 2024-08-13 09:24:46 发布
阅读量978 收藏 7
点赞数 11
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_37497849/article/details/134684263
版权
本文介绍了在fastadmin框架中如何全局修改弹出窗口的大小，提供了两种方法，分别涉及修改fast.js和require-backend.min.js文件，以及使用MutationObserver监听窗口内元素变化以适应不同屏幕尺寸。
摘要由CSDN通过智能技术生成

fast admin 全局修改弹窗大小

记录一下全局修改大小，一般第一个方法就可以实现效果

方法一：修改 public\assets\js\fast.js
  //打开一个弹出窗口
            open: function (url, title, options) {
                title = options && options.title ? options.title : (title ? title : "");
                url = Fast.api.fixurl(url);
                url = url + (url.indexOf("?") > -1 ? "&" : "?") + "dialog=1";
                var area = Fast.config.openArea != undefined ? Fast.config.openArea : [$(window).width() > '100%' ? '100%' : '100%', $(window).height() > '100%' ? '100%' : '100%'];
                options = $.extend({
                    type: 2,
                    title: title,
                    shadeClose: true,
                    shade: false,
                    maxmin: true,
                    moveOut: true,
                    area: area,
                    content: url,
                    zIndex: Layer.zIndex,
                    success: function (layero, index) {
                        var that = this;
                        //存储callback事件
                        $(layero).data("callback", that.callback);
                        //$(layero).removeClass("layui-layer-border");
                        Layer.setTop(layero);
                        try {
                            var frame = Layer.getChildFrame('html', index);
                            var layerfooter = frame.find(".layer-footer");
                            Fast.api.layerfooter(layero, index, that);

                            //绑定事件
                            if (layerfooter.length > 0) {
                                // 监听窗口内的元素及属性变化
                                // Firefox和Chrome早期版本中带有前缀
                                var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
                                if (MutationObserver) {
                                    // 选择目标节点
                                    var target = layerfooter[0];
                                    // 创建观察者对象
                                    var observer = new MutationObserver(function (mutations) {
                                        Fast.api.layerfooter(layero, index, that);
                                        mutations.forEach(function (mutation) {
                                        });
                                    });
                                    // 配置观察选项:
                                    var config = {attributes: true, childList: true, characterData: true, subtree: true}
                                    // 传入目标节点和观察选项
                                    observer.observe(target, config);
                                    // 随后,你还可以停止观察
                                    // observer.disconnect();
                                }
                            }
                        } catch (e) {

                        }
                        if ($(layero).height() > $(window).height()) {
                            //当弹出窗口大于浏览器可视高度时,重定位
                            Layer.style(index, {
                                top: 0,
                                height: $(window).height()
                            });
                        }
                    }
                }, options ? options : {});
                if ($(window).width() < 480 || (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream && top.$(".tab-pane.active").length > 0)) {
                    if (top.$(".tab-pane.active").length > 0) {
                        options.area = [top.$(".tab-pane.active").width() + "px", top.$(".tab-pane.active").height() + "px"];
                        options.offset = [top.$(".tab-pane.active").scrollTop() + "px", "0px"];
                    } else {
                        options.area = [$(window).width() + "px", $(window).height() + "px"];
                        options.offset = ["0px", "0px"];
                    }
                }
                return Layer.open(options);
            },
方法二：修改  public\assets\js\require-backend.min.js
     //打开一个弹出窗口
            open: function (url, title, options) {
                title = options && options.title ? options.title : (title ? title : "");
                url = Fast.api.fixurl(url);
                url = url + (url.indexOf("?") > -1 ? "&" : "?") + "dialog=1";
                var area = Fast.config.openArea != undefined ? Fast.config.openArea : [$(window).width() > '100%' ? '100%' : '100%', $(window).height() > '100%' ? '100%' : '100%'];
                options = $.extend({
                    type: 2,
                    title: title,
                    shadeClose: true,
                    shade: false,
                    maxmin: true,
                    moveOut: true,
                    area: area,
                    content: url,
                    zIndex: Layer.zIndex,
                    success: function (layero, index) {
                        var that = this;
                        //存储callback事件
                        $(layero).data("callback", that.callback);
                        //$(layero).removeClass("layui-layer-border");
                        Layer.setTop(layero);
                        try {
                            var frame = Layer.getChildFrame('html', index);
                            var layerfooter = frame.find(".layer-footer");
                            Fast.api.layerfooter(layero, index, that);

                            //绑定事件
                            if (layerfooter.length > 0) {
                                // 监听窗口内的元素及属性变化
                                // Firefox和Chrome早期版本中带有前缀
                                var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
                                if (MutationObserver) {
                                    // 选择目标节点
                                    var target = layerfooter[0];
                                    // 创建观察者对象
                                    var observer = new MutationObserver(function (mutations) {
                                        Fast.api.layerfooter(layero, index, that);
                                        mutations.forEach(function (mutation) {
                                        });
                                    });
                                    // 配置观察选项:
                                    var config = {attributes: true, childList: true, characterData: true, subtree: true}
                                    // 传入目标节点和观察选项
                                    observer.observe(target, config);
                                    // 随后,你还可以停止观察
                                    // observer.disconnect();
                                }
                            }
                        } catch (e) {

                        }
                        if ($(layero).height() > $(window).height()) {
                            //当弹出窗口大于浏览器可视高度时,重定位
                            Layer.style(index, {
                                top: 0,
                                height: $(window).height()
                            });
                        }
                    }
                }, options ? options : {});
                if ($(window).width() < 480 || (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream && top.$(".tab-pane.active").length > 0)) {
                    if (top.$(".tab-pane.active").length > 0) {
                        options.area = [top.$(".tab-pane.active").width() + "px", top.$(".tab-pane.active").height() + "px"];
                        options.offset = [top.$(".tab-pane.active").scrollTop() + "px", "0px"];
                    } else {
                        options.area = [$(window).width() + "px", $(window).height() + "px"];
                        options.offset = ["0px", "0px"];
                    }
                }
                return Layer.open(options);
            },
我是一颗小葡萄ww
关注
FsatAdmin弹窗尺寸自适应屏幕
qq_42756268的博客
01-08 567
define(['jquery', 'bootstrap', 'frontend', 'form', 'template'], function ($, undefined, Frontend, Form, Template) { //判断页面大小, function screen() { //获取当前窗口的宽度 var width = $(window).width(); if (width > 1200) { ret
fastadmin 各种开发技巧，问题总合集，持续跟新中....
xxpxxpoo8的专栏
07-09 1319
也可以单独获取某个字段 js 需改后的代码 需要带花括号 下面简单介绍一下几个配置的含义 name:唯一标识,其中index/add/edit/del/multi/dragsort这几个框架已经暂用,如果使用将会覆盖已有属性 text:按钮上的文本，可以为空时，为空时按钮将不显示文字信息，为空时最好配置上icon的值 title:按钮的标题信息，当鼠标移到上面时显示的文字，同时作为dialog弹出窗时的标题信息 icon:按钮上的按钮信息，可使用Font-awesome的按钮，当text为空时请务必填
fastadmin 修改弹窗大小
最新发布
巴啦啦臭魔仙的博客
08-13 918
该方法可以实现页面中所有的弹窗大小统一，包括新增、修改、回收站等弹窗： 如图：该方法适用于对某一类弹窗进行单独设置：1、自定义按钮弹窗： 例如以上自定义按钮，可以通过以下方式实现控制弹窗大小： 方法3： 该方法适用于控制新增、编辑等非自定义页面的弹窗：例如我要单独修改编辑页面的弹窗大小，可以在表格初始化前添加以下代码：
fastadmin自定义添加、修改弹窗大小
LordForce的博客
12-20 2447
fastadmin自定义弹窗大小|fastadmin修改弹窗大小|修改fastadmin添加、修改弹窗大小
fastadmin点击按钮调整弹窗的大小
cmj8043719242的博客
05-30 427
visible属性为控制按钮现不现实，这里status = 3 时按钮显示，否则隐藏，实际可根据业务逻辑修改。控制弹窗代码，调整百分比就可以了。
fastadmin 自定义弹窗大小
T_Hong的博客
08-23 1895
自定义fastadmin弹窗的三种方式
FastAdmin插件开发辅助增强插件
weixin_37045384的博客
12-23 1685
不改变官方的开发习惯，但更丝滑，尽最大的努力生成你想要的代码
fastadmin-微信小程序实战课程：todolist项目文档（课件）整理汇总
分享编程经验
01-11 3415
网址整理 视频教程地址： https://www.ixigua.com/7017702820048536071 后端接口仓库地址： https://gitee.com/maoshushare/fast-todolist 第一节 项目计划和准备工作 项目简介 本项目是一个fastadmin+微信小程序的实战案例，一个简单的todolist任务管理功能，包括后台数据增删改查、数据统计、api接口开发（小程序对接登录、小程序端管理数据）等。 功能比较简单，覆盖到的知识点不会太多，适合初学者，尤其适合没有做过小程序
Fastadmin踩坑日记-2.魔改表格
xzy565143480的博客
02-04 2596
Fastadmin踩坑日记-2.魔改表格 经过日夜的查找，终于可以慢慢的上手这个了，踩了几个坑，记录一下 坑1-前台无法显示emoji字符 最早的几个emoji是2个字节，在utf8默认的双字节编码中是可以正常显示的，比如那个红色感叹号❕，到后来emoji逐步成为了4个字符，原本的utf8_gerneral_ci字符集就没法显示了，必须手动设置 显示emoji需要几个条件 数据库字符集为utf...
fastadmin改变弹窗大小
qq_45099094的博客
08-30 283
如图 添加 extend:‘data-area=’[“100%”,“100%”]’’ 即可 估计是你项目public /assets/js/backend下面具体的某一个 buttons 了
fastadmin5弹窗自定义大小
LordForce的博客
05-13 795
fastadmin5自定义弹窗大小
【fastadmin】fastadmin修改弹窗大小
pmlptf的博客
08-25 6676
最近接触了Fastadmin，CRUD的酸爽大家有目共睹。（比较TP的文档来说）官方的文档看得我有点难受，就修改后台弹窗这一项来说，确实让我觉得自己啥都不会…… 正题：修改弹窗大小有两个地方： 顶部的按钮 表格操作按钮 那么我们对应的来修改： 修改顶部按钮弹窗大小如下 表格操作按钮，这个比较重点了，按钮是bootstrap的table生成的，那么我们需要在bootst...
fastadmin两种自定义弹出层/弹出框宽高/大小的方法
hzhairuntao的博客
11-30 9752
第一种，在表格里面点击按钮触发的弹出层，这是在js文件添加按钮，然后点击触发弹出层。 自定义弹出层的代码如下： 如图，我是在表格中新加来一个“二维码”的按钮，用来点击触发弹出层，自定义弹出层大小需要添加参数： extend:'data-area=["860px","730px"]', 依次是 宽 和 高 { field: 'buttons', width: "120px..
fastadmin按钮弹窗大小显示方式
wufeicode的博客
05-26 1947
表格上面的添加，编辑弹窗，可以直接在对应的index.html文件里面加上下面对应的属性 data-area='["60%","80%"]' --大小 data-shade='[0.5,"#000"]' --遮罩层 表格里面的编辑弹窗，在对应的.js文件里面添加，重写行内按钮属性样式 buttons:[{ name: 'edit', title: '修改', icon: 'fa fa-pencil', classname: 'btn btn-xs btn..
fastadmin的弹出窗口，如何调整尺寸？
写写代码
11-30 345
fastadmin
初识FastAdmin中的弹出窗口的功能
守护大白菜的博客
08-22 4916
一张图解析FastAdmin中的弹出窗口的功能 功能描述 弹出窗口是FastAdmin中最常用的功能之一，FastAdmin中默认生成的CRUD中的编辑、添加和删除的弹窗都是基于Layer弹层组件实现的，FastAdmin在此基础上进行了扩展和二次开发，除了Layer原有的功能外，还有部分FastAdmin特有的功能。 首先我们先来看看最常用的编辑和添加弹窗。在CRUD后的列表中默认的添加和编辑按钮会自动绑定事件，如果需要手动弹窗，我们可以使用Fast.api.open(url, tit..
fastadmin fast.js
qq_31315703的博客
10-18 421
api: { //发送Ajax请求 ajax: function (options, success, error) { options = typeof options === 'string' ? {url: options} : options; var index; if (typeof options.loading === 'undefined' ||
FastAdmin短信插件安装及配置教程
资源摘要信息:"FastAdmin短信插件" FastAdmin短信插件是为FastAdmin框架打造的一款短信服务扩展应用，允许开发者在FastAdmin构建的网站中轻松实现短信发送功能。以下是针对该插件的详细知识点解析： ### 插件功能...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值