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>