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
};
}
);
@其它——直接在页面使用
<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 2 自带模态的应用的更多相关文章
- [转]解决Magento批量导入带图片的商品的问题
本文转自:http://www.phpstudio.info/show-121-791-1.html 一般来说,Magento后台管理里的CSV批量导入,可以解决我们商品批量上传的大部分问题,我们只要 ...
- magento安装
最近在做一个Magento 1.7.0.2的站,在安装环节Magento一直报错Database server does not support the InnoDB storage engine. ...
- Magento给新产品页面添加分页
本文介绍如何让magento创建一个带分页功能的新到产品页面,方便我们在首页或者其它CMS Page调用和展示新到产品. 在Magento我们经常有的做法是建立一个可以调用新产品的block,然后通过 ...
- magento数据库备份导入还原
Magento数据库备份.移植终极解决方案+3 分类:Magento教程 标签:magento搬家.magento数据库备份.magento更换域名.magento移植 4,355人浏览 作为电子商务 ...
- magneto创建运费模板
Magento系统自带了大概7种运费方式:平价.运费表.免运费.ups.usps.fedex.dhl等.不过这些依然无法满足我们的需求,这时候就需要创建一个shipping module 来实现了.创 ...
- 测试报告$\alpha$
pytorch可视化编程网站VisualPytorch NAG \(\alpha\)版本发布了!点击网址访问:VisualPytorch 一.测试查虫(bug detection) 测试贯穿了开发.集 ...
- QT模态对话框用法(在UI文件中设置Widget背景图,这个图是一个带阴影边框的图片——酷)
QT弹出模态对话框做法: 1.新建UI文件时,一定要选择基类是QDialog的,我的选择是:Dialog without Buttons(),如下图: 2.然后在使用的时候: MyDialog dlg ...
- Bootstrap 模态框(Modal)带参数传值实例
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 为了实现父窗体与其的交互,通常需要向其传值,实现 ...
- bootstrap如何去除自带的样式----导航栏中的菜单实现平滑的过渡到对应的菜单区域-------动态跟换模态框中的内容
问题1:如何去除bootstap中css中自带的overflow:hidden这个样式 今天遇见在bootstap中轮播图上的 附带图 片不能够显示出来,图片始终有一部分的高度 被隐藏了 后来通 ...
随机推荐
- 取之有道——巧用Root权限 启动其他APP中的Activity
这次博主来分享一个很巧妙的办法来启动其他APP中Activity的方法. 首先说一下这样做的目的:最近博主在攻克一个技术难点,就是搞定某些三方系统中,对于应用权限的限制.为此给出用户指导,引导用户启动 ...
- Linux journalctl命令
在Systemd出现之前,Linux系统及各应用的日志都是分别管理的,Systemd开始统一管理了所有Unit的启动日志,这样带来的好处就是可以只用一个 journalctl命令,查看所有内核和应用的 ...
- 简简单单的Vue2(简单语法,生命周期,组件)
既然选择了远方,便只顾风雨兼程! __HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 简单入手 组件 在上面文章,我们简单的讲了前端框架的工程化,也就是MVVM,还有特别聊 ...
- nginx 启动错误
场景 在Windows下 启动nginx报错: nginx: [error] ReadFile() : Incorrect function) 解决 因为 nginx.conf 中存在 /* 被认为是 ...
- JavaScript篇 深入理解JavaScript函数
JavaScript中的函数 1. 函数的定义 两种定义形式: 通过函数定义表达式来定义 通过函数声明语句来定义 函数声明语句定义一个函数 //计算阶乘的递归函数 function factorial ...
- 小程序应用的Python服务器部署高配,依然是腾讯云秒杀阿里云!
上一篇文章,“小程序创业最低配置部署,腾讯云折扣秒杀阿里云!”介绍了小程序项目启动时的最低配置服务器选择,但当项目良好发展时,还是要把服务器配置调整到标准水平,承受住日益增长的流量访问. 随着Pyth ...
- Dynamics 365-关于Solution的那些事(一)
关于CRM Solution,我准备写两到三篇的博客来做下介绍:包括一些基本信息,超大solution,还有增量更新solution操作等. CRM中的component,都是放在一个名叫Soluti ...
- Fragment生命周期以及使用时的小问题
前言- 昨天在写UI的时候用到了FRAGMENT,发现自己对此还不是非常了解,借此机会记录一下 Fragment的生命周期- 官方生命周期图: Fragment每个生命周期方法的意义.作用- onVi ...
- 一起学Android之ProgressBar
本文简述在Android开发中进度条(ProgressBar)的常见应用,仅供学习分享使用. 概述 在Android开发中,进度条的使用场景有很多,如播放电影时可拖动的观看进度条,评分时使用的评分条, ...
- Android编程示例:创建机场计划模拟器应用程序
在本文中,我们将演示如何使用Android Studio和Java编程语言创建一个示例Android应用程序,从“临时”实现高级响应用户界面的功能.本文中讨论的应用程序将实现机场航班时刻表模拟的功能. ...