在本文中，我们将看一个在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.

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

1
2
3
4
5
6
<div class="block-search-toggle" id="search-popup-toggle">
   <span class="block-search-toggle-icon">
       <img src="<?php echo $block->getViewFileUrl('images/search-icon.svg'); ?>" alt="search-icon">
   </span>
   <span class="block-search-toggle-text">Search</span>
</div>

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

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

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

1
2
3
4
5
6
7
<script type="text/x-magento-init">
       {
           "#search-popup-toggle": {
               "Magento_Search/js/search-popup": {}
           }
       }
</script>

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

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

在文件中放入以下代码:

<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
?>
<?php
/** @var $block \Magento\Framework\View\Element\Template */
/** @var $helper \Magento\Search\Helper\Data */
$helper = $this->helper(\Magento\Search\Helper\Data::class);
?>
<div class="block-search-toggle" id="search-popup-toggle">
   <span class="block-search-toggle-icon">
       <img src="<?php echo $block->getViewFileUrl('images/search-icon.svg'); ?>" alt="search-icon">
   </span>
   <span class="block-search-toggle-text">Search</span>
</div>
<div class="block block-search" id="search-block">
   <div class="block block-title"><strong><?= /* @escapeNotVerified */ __('Search') ?></strong></div>
   <div class="block block-content">
       <form class="form minisearch" id="search_mini_form" action="<?= /* @escapeNotVerified */ $helper->getResultUrl() ?>" method="get">
           <div class="field search">
               <label class="label" for="search" data-role="minisearch-label">
                   <span><?= /* @escapeNotVerified */ __('Search') ?></span>
               </label>
               <div class="control">
                   <input id="search"
                          data-mage-init='{"quickSearch":{
                               "formSelector":"#search_mini_form",
                               "url":"<?= /* @escapeNotVerified */ $helper->getSuggestUrl()?>",
                               "destinationSelector":"#search_autocomplete"}
                          }'
                          type="text"
                          name="<?= /* @escapeNotVerified */ $helper->getQueryParamName() ?>"
                          value="<?= /* @escapeNotVerified */ $helper->getEscapedQueryText() ?>"
                          placeholder="Search By Typing"
                          class="input-text"
                          maxlength="<?= /* @escapeNotVerified */ $helper->getMaxQueryLength() ?>"
                          role="combobox"
                          aria-haspopup="false"
                          aria-autocomplete="both"
                          autocomplete="off"/>
                   <div id="search_autocomplete" class="search-autocomplete"></div>
                   <?= $block->getChildHtml() ?>
               </div>
           </div>
           <div class="actions">
               <button type="submit"
                       title="<?= $block->escapeHtml(__('Search')) ?>"
                       class="action search">
                   <span><?= /* @escapeNotVerified */ __('Search') ?></span>
               </button>
           </div>
       </form>
   </div>
</div>
<script type="text/x-magento-init">
       {
           "#search-popup-toggle": {
               "Magento_Search/js/search-popup": {}
           }
       }
</script>

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