Magento 2 自带模态的应用
Modal widget in Magento 2
Magento 2 自带模态的应用
使用magento 2 的自带模态组件,以下代码只供参考使用。
1,DOM 》模态块与触发元素
.pthml
<!-- 模态DOM --> < div id="modal-content" hidden="hidden" data-goodsid=""> <? php if ($block->isLogin()): ?> <!-- fixme view data--> <!-- Add list CSS @var todo $mcsize_list Mc_Size::css/account/mcsize_list.css --> < link rel="stylesheet" href="<?php echo $this->getViewFileUrl('Mc_Size::css/account/mcsize_list.css'); ?>"> <!-- Add list DOM--> < div id="account-mcsize-lists"> < span class="base page-title">Select size</ span > < hr > < div > < span class="btn-xs cursor" id="tape">Tape </ span > < span > | </ span > < span class="btn-xs cursor" id="shirt">Shirt </ span > </ div > < br > <!-- fixme tape--> < div id="class_tape" class="measurement-profiles"> <? php $list_data = $block->getTapeList(); ?> <? php foreach ($list_data as $news) { ?> < div class="measurement-profile c-24 c-m-24" data-id="<?php echo $news['tape_id'] ?>" data-type="tape"> < div > < div class="icon"> <!--fixme img icon--> <!--fixme edit--> < img src="<?php echo $this->getViewFileUrl('Mc_Size::images/tape-measure.svg'); ?>" alt=""> </ div > < div class="summary"> < span class="name"><? php echo $news['name']; ?></ span >< br > < span class="type">Body measurements - <? php echo $news['created_at']; ?></ span > </ div > < div class="actions"> < a class="primaryButton mini" href="/mcsize/index/tape?id=<?php echo $news['tape_id'] ?>">Edit</ a > </ div > </ div > </ div > <? php } ?> </ div > <!-- end--> </ div > <? php else: ?> <!-- fixme view message--> < div class="col-md-12">Go to < a href="/customer/account/login" class="">Login</ a > now !</ div > <? php endif ?> </ div > <!-- 触发元素--> < div id="__modal-button-<?php echo $_item->getId(); ?>" style="cursor: pointer;" data-mage-init='{"example-modal": {"target": "#modal-content"}}' class="btn-xs btn-primary"> Binding size</ div > |
2,配置模块名》目录自动加载
/app/code/vendor_name/module_name/view/frontend/requirejs-config.js
var config = { map: { '*': { 'example-modal': '<vendor_name>_<module_name>/js/example-modal' } } };
3,调用模态》用于触发的 js 代码
example-modal.js —— 注意:ExampleModal 对象对模块绑定函数
define([ "jquery", "Magento_Ui/js/modal/modal", 'Mc_Size/plugins/sweetalert.min' ], function ($) { var p = "#account-mcsize-lists"; var f = ".measurement-profile"; var ac = 'active'; $(p).find(f).on('click', clickSize); function clickSize(e) { e.stopPropagation(); var me = $(this); me.addClass(ac); me.siblings().removeClass('active'); } /** * * @param name * @returns {*|jQuery.fn.init|n.fn.init|m.fn.init|jQuery|HTMLElement} */ function getobj(name) { return $(name); } $('#tape').on('click', function () {//todo click tape var s = '#class_shirt'; var t = '#class_tape'; var t_html = $(t).clone(true); var s_html = $(s).clone(true); $(t).remove(); $(s).remove(); $(p).append(t_html); $('#shirt_dom').append(s_html); }); $('#shirt').on('click', function () {//todo click shirt var s = '#class_shirt'; var t = '#class_tape'; var t_html = $(t).clone(true); var s_html = $(s).clone(true); $(t).remove(); $(s).remove(); $('#shirt_dom').append(t_html); $(p).append(s_html); $(p).find(f).on('click', clickSize); }); // fixme modal var ExampleModal = { initModal: function (config, element) { $target = $(config.target); $element = $(element); $target.modal({ closed: function () { // Do some action when modal closed var tape_id = $(p).find('.active').data('id'); var type = $(p).find('.active').data('type'); if (!tape_id) { $target.modal('openModal');//open modal return; } var active = '#cart-' + ac; $(active).attr({'data-id': tape_id,'data-type':type}).text('Already bound').addClass('btn-danger'); $(p).find(f).removeClass(ac); $(active).attr('id', '');//remove id } }); $element.click(function () { var dataid = $(this).attr('data-id'); var datatype = $(this).attr('data-type'); $(this).attr('id', 'cart-' + ac);//add id //data-type is shirt if(datatype === 'shirt'){ $('#shirt').trigger('click');//event trigger }else if(datatype === 'tape'){ $('#tape').trigger('click');//event trigger } if (dataid) { $(p).find('div[data-id=' + dataid + ']').addClass(ac); }else{ // .. } $target.modal('openModal');//open modal }); } }; return { 'example-modal': ExampleModal.initModal }; } );
@其它——直接在页面使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | < script > require( ["jquery", "Magento_Ui/js/modal/modal", 'Mc_Size/plugins/sweetalert.min'] , function ($,modal,swal) { var options = { 'type': 'popup', 'title': 'Select Gender', 'responsive': true, 'innerScroll': true, }; var popup = modal(options, $('#modal-content')); $('#modal-content').modal('openModal');//open modal }) </ script > |
分类:
Magento
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南