感觉后台的弹出窗口一直是系统功能实现的弱项,由于系统大部分采用了layer,但是layer实现ajax加载网页内容的显示效果与系统兼容性不是很好,导致每个升级到弹出窗口的展现都需要前端人员参与设计,十分耗时,所以对前端的代码进行了简单的封装,使用方式如下:
1.依赖jquery.method.js,后台作为公共函数已经引入,无需自己调用。
2.使用方式:
(一)最常用,也是非常建议的ajax加载网页内容:
$("body").on("click", ".offsale-goods", function() { var id = $(this).data("id"); $.modal({ // 标题 title: '违规商品', // ajax加载的设置 ajax: { url: '/goods/publish/illegal', data: { id: id } }, }); });
(一)直接引用页面元素:
$.modal({ title: '违规商品', content: '123123', });
API:
1. $.modal(options)可以打开弹出窗口。
2. options默认值为:
var defaults = { id: uuid(), title: false, content: '', footer: false, width: false, height: false, // 用于存放一些交互用的数据 params: {}, ajax: false, // 触发器,会在触发器的data中存放modal trigger: false, // 在调用 show 方法后触发。 onshow: null, // 当调用 hide 实例方法时触发。 onhide: null, };
3.获取元素绑定的Modal:$.modal(jquery对象),用于获取触发器、Modal中的元素所绑定的Modal对象。
4.常用函数:
打开模式对话框,会触发onshow的回调函数 modal.show() 隐藏模式对话框,会触发onhide的回调函数 modal.hide() 切换显示隐藏的状态 modal.toggle() 销毁模式对话框 modal.close() 设置宽度 modal.width(宽度) 设置高度 modal.height(高度) // 设置标题 modal.title(标题) 添加按钮 modal.addButton({ id: 按钮ID, text: 按钮显示的文本, btn_class: 'btn btn_primary' // 按钮的样式 click: null, // 按钮的点击事件,默认实现了点击隐藏的事件 }); // 根据按钮ID移除按钮 modal.removeButton(id);
5.常见问题:
1.点击某个按钮或者超链接触发打开了一个Modal,那么想下次点击再次打开同一个Modal的话可以如下操作: $("#按钮").click(function(){ var modal = $.modal($(this)); if(modal){ modal.show(); }else{ modal = $.modal({ //创建一个新的对话框 }); } });
2.如何在打开的对话框中获取Modal对象? 为了了能够灵活操作对话框中的页面元素,建议在Modal的内容页面顶部加入 {$uuid = uuid()} 这样来创建一个唯一标识,并且赋值给对话框内容页的外层容器,容器的ID可以设置为$uuid 例如:<div id="{$uuid}"> 这样在页面中操作时可以通过 $("#{$uuid}").find("你要查找的元素"),这种方式可以确保不会和其他页面内相同的元素发生冲突。 获取当前页面所属的Modal对象如下: var modal = $.modal($("#{uuid}")); 然后就可以随意使用了
3.对话框如何和打开对话框的页面进行参数的交互? 很多时候需要将页面的一些参数传递给Modal对象,可以通过Modal对象的params属性作为一个间接的容器,但是大多时候Modal对象和打开的页面就在同一个页面,只要变量的范围允许,都可以引用的。
相关推荐
AdminLTE包含各种图表、表单元素、导航选项、模态对话框等组件,这些都可以直接在Yii2 Starter Kit中使用,大大减少了定制后台界面的工作量。 Yii2 Starter Kit 2.3.2 版本中,包含了以下主要特性: 1. **安装与...
总的来说,这个压缩包提供的Yii2-SweetAlert小部件允许开发者轻松地在Yii2应用中集成美观的SweetAlert对话框,提升应用的交互性和用户体验。通过理解和实践这些知识点,你可以更好地利用这个工具来增强你的PHP项目。
yii2-对话框 Yii Framework 2.0的小部件组件,可轻松配置和初始化弹出通知对话框。 它为本机javascript警报,确认和提示对话框提供了一个polyfill。 它包括对通过呈现丰富对话框的内置支持,这使得使用Bootstrap的...
`yii2-easyui`是将EasyUI集成到Yii2框架中的一个插件,使得开发者可以方便地在Yii2项目中利用EasyUI的功能。 在使用`yii2-easyui`时,首先需要了解Yii2的基本架构,包括MVC(模型-视图-控制器)模式、组件系统以及...
电子更新对话框 EUpdateDialog是 Yii 框架的扩展。 此扩展允许使用 jQuery UI 对话框运行控制器操作。 它用于扩展您的应用程序以允许简单的 CRUD(创建-读取-更新-删除)操作或任何其他返回正确 JSON 响应的操作。 ...
JavaScript 在这个项目中扮演着重要的角色,AdminLTE 使用了 jQuery 作为基础库,同时也集成了其他库如 Chart.js 和 Morris.js 来实现图表展示,以及 SweetAlert 提供更友好的提示对话框。你可以通过修改 JavaScript...
只要在合适的地方调用它的方法就可以了,可以说yii2是个可以开箱即用的框架,你可以用它很快的实现一个需要的功能:比如在页面中放置一个删除按钮,点击按钮发送post请求,弹出确认对话框。如果没有yii\helpers\Html...
Nozzha Ajaxy 2.0:通过 Ajax for Yii 2 的操作对话框Nozzha Ajaxy 是一个扩展,它提供了一个简单的 API 来使用 Bootstrap 插件通过页面中的对话框来显示操作。 Ajaxy 旨在显示创建或更新操作对话框。 换句话说,...
Yii框架中的CJuiDialog组件是一个用于创建弹出对话框的工具,它是基于jQuery UI库的Dialog组件。本文将深入探讨CJuiDialog的用法和相关属性。 首先,使用CJuiDialog需要在视图文件中调用`$this->beginWidget()`和`$...
在Yii中,弹出框(对话框)通常通过使用CJuiDialog组件实现,该组件是基于jQuery UI库的Dialog插件封装。本文将深入探讨如何在Yii框架中实现弹出框功能,并通过实例代码进行解析。 首先,让我们了解CJuiDialog的...
“yii2-admin”扩展通常会利用JavaScript进行前端交互和动态效果的实现,例如表单验证、AJAX请求、模态对话框等。Yii 2框架自带的Asset Manager可以方便地管理JavaScript库和CSS样式文件。在“yii2-admin”中,你...
8. **模态对话框**:虽然PNotify主要用于非模态通知,但通过自定义配置,可以实现类似模态对话框的效果,提高用户交互体验。 9. **优化性能**:为了确保性能,应合理使用PNotify,避免过多的通知导致页面负担过重。...
在Yii2.0中实现js异步删除主要涉及到以下几个知识点: 1. 后端控制器的实现:在Yii2.0中,控制器负责处理用户的请求和执行相应的业务逻辑。在异步删除操作中,需要创建一个控制器动作(action)来处理删除请求。在...
在Yii框架中,CGridView是用于展示数据集的强大的组件,尤其适合于表格形式的数据展示。这个组件提供了很多自定义选项,包括操作列(Action Column)中的按钮,如查看、编辑和删除等。本篇文章将深入讲解如何在...
Bootbox.js 是一个小型的 JavaScript 库用来创建简单的可编程对话框,基于 Twitter 的 Bootstrap 开发。今天我们就来研究下,如何使用bootbox插件来实现自定义弹窗。
最后,这个功能的效果图展示了在用户尝试删除数据时,会弹出一个具有指定样式和内容的确认对话框,用户可以决定是否继续进行删除操作。 总的来说,通过这种方式,开发者可以在Yii应用中轻松实现一个自定义的删除...
EasyUI 是一套用于快速开发 Web 应用的 UI 框架,它提供了丰富的组件,如表格、树形结构、对话框、表单等,帮助开发者快速构建具有专业外观和交互功能的网页应用。其设计目标是使开发者能够专注于业务逻辑,而无需...