在Magento2中使用弹出窗口小部件jQuery

在本文中,我们将看一个在Magento 2中使用jQuery弹出窗口小部件的示例。为了清晰起见,我们将使用这个小部件创建一个模态窗口,在其中放置搜索表单,搜索表单默认位于header中。首先,让我们看看现有的小部件选项。以下选项是默认可用的:

  • autoOpen
  • buttons
  • clickableOverlay
  • focus
  • innerScroll
  • modalClass
  • modalLeftMargin
  • responsive
  • title
  • type

但是,这个列表不是最终的列表,您可以自由地添加所需的选项,从而扩展这个小部件的原始功能。

让我们仔细看看每个选项。

autoOpen

此属性的默认值为“false”。属性确定小部件初始化后是否立即显示模态窗口。

buttons

该属性的值是一个数组,其中包含一个对象,您可以在该对象中传递按钮、CSS类和处理程序函数的文本,单击按钮时将触发处理程序函数。

clickableOverlay

此属性确定在单击叠加时是否可以关闭模态窗口。默认值为true。

focus

此属性确定在窗口打开后立即处于焦点位置的元素。具有CSS类名称的字符串被接受为值。在我们的例子中,在打开一个弹出窗口之后,重点应该放在搜索输入字段上。

innerScroll

如果模态窗口超过了屏幕的大小,这个属性将确定滚动位置,并且在打开弹出窗口时,我们需要滚动位于特定位置。

modalClass

有了这个属性,我们可以定义样式化所需的任何CSS属性

modalLeftMargin

此属性设置模态窗口之间的缩进。

responsive

定义模态窗口的自适应行为。默认情况下,该值设置为false。

title

定义模态窗口的标题。

type

此属性接受两个值作为字符串弹出或模态。根据所选的值,将定义一个用于呈现弹出窗口的模板。这些模板默认位于下列文件夹中:

  • <Magento_Ui_module_dir>/view/base/web/templates/modal/modal-popup.html popup template.
  • <Magento_Ui_module_dir>/view/base/web/templates/modal/modal-slide.html slide template.

如果需要,可以在theme文件夹中覆盖它们。

由于我们将为标题搜索表单创建一个弹出窗口,因此需要覆盖form.mini并稍微修改它。phtml模板。

该模板位于vendor/magento/module-search中。让我们覆盖它,把它放在下面的文件夹:

Vendor_Name/Vendor_Theme/Magento_Search/templates/form.mini.phtml.

在搜索块前面添加一个标记,它将显示搜索按钮,单击该按钮后,我们的模态窗口将弹出。

从技术上讲,这并不一定是一个按钮元素。这可以是任何DOM元素,稍后我们将向其附加事件处理程序。

下一步是连接RequireJS模块,在这个模块中我们定义了弹出窗口的设置。为了连接模块,我们使用了一个声明性的符号,通过<script type=”text/x-magento-init” /> 标签

在模板的末尾添加以下代码:

在这个JSON对象中,我们传递#search-popup-toggle元素和search-popup.js脚本,我们将在下一步创建。请注意,在上面的代码中,我们指定了没有扩展名的js文件的名称。

Vendor_Name/Vendor_Theme/Magento_Search/we/js文件夹中,我们创建了一个新文件search-popup.js

在文件中放入以下代码:

这就是jQuery弹出窗口小部件在Magento 2中的样子,感谢您的阅读!在下面的部分留下你的评论和问题,我很乐意回答。

 

如果有不懂的地方请留言,SKY8G网站编辑者专注于研究IT源代码研究与开发。希望你下次光临,你的认可和留言是对我们最大的支持,谢谢!

上一篇: PHP | strstr() Function

下一篇: 在Magento 2中自定义电子邮件模板

登录 评论
avatar