jquery - magento 2 Uncaught TypeError：没有名为“openModal”的方法

Question

我正在使用 magento 2.3 版本。我制作了一个自定义模块。在自定义模块中，我需要 2 个弹出窗口（使用引导模式）。

这是我的js代码-

JS代码：

define(


    [

        'jquery',
        'Magento_Ui/js/modal/modal',
        'jquery/jquery.cookie',
    ],


    function ($, Component) {

        'use strict';

        var mageJsComponent = function (data) {
            var getData = JSON.stringify(data);
            var jsongetData = JSON.parse(getData);
            var height_value = jsongetData["height"];
            var width_value = jsongetData["width"];
            var coockie_value = jsongetData["coockieexpire"];
            var coockie_value = coockie_value*3600;
            $(document).ready(
                function ($) {
                console.log("ageverification.phtml : document loaded");
                });
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                // buttons: [{}],
                modalClass: 'custom_age_verfication',
                responsiveClass: 'ageverification-poup'
            };
            $(document).keyup(function (e) {
                if (e.keyCode == 27) {
                    return false;
                }
            });

            $(document).ready(function () {
                $(document).mousedown(function (e) {
                    return true;
                });

                if ($.cookie('status') != 1) {
                    var ageconf = document.getElementsByClassName('ageconf');
                    if (ageconf.length > 0) {
                        if (document.getElementById("popup").classList.contains('ageconf')) {
                            $(document).mousedown(function (e) {
                                return false;
                            });
                        }
                    }


                   var mdl = jQuery('.age-pop-up').modal(options);
                    jQuery('.age-pop-up').modal('openModal');
                    // Click on enter button
                    $('#enter').click(function () {
                        if (coockie_value == "") {
                            coockie_value = 1;
                        }
                        $.cookie('status', '1', {
                            expires: +coockie_value
                        });
                        jQuery('.age-pop-up').modal('closeModal');
                        window.location.reload();
                        // detect safari browser
                        if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
                            window.location.reload();
                        }
                    });

                    $('#no').click(function () {
                        if (coockie_value == "") {
                            coockie_value = 1;
                        }
                        $.cookie('status', '0', {
                            expires: +coockie_value
                        });
                        var mdl = jQuery('.not-verify').modal();
                        jQuery('.not-verify').modal('openModal');
                        jQuery('.age-pop-up').modal('closeModal');
                        jQuery('.age-pop-up.not-verify').show();
                    });
                }
            });
            // end : pop-up  age verification content
        };
        return mageJsComponent;
    });

.phtml 文件：

<div class="outer-bg">
    <div id="popup" class="pop-cont age-pop-up ageconf">
        <div class="verify">
            <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId($popupblockid)->toHtml(); ?>
                <div class="buttons-set">
                    <a id="enter" class="button valid-age" title="<?php echo $agreebtn; ?>" href="#"><?php echo $agreebtn; ?></a>
                    <h4>Or</h4>
                    <a id="no" class="button not-valid-age" title="<?php echo $disagreebtn; ?>" href="#"><?php echo $disagreebtn; ?></a>
                </div>
        </div>
    </div>
    <div id="popup1" class="not-verify age-pop-up">
        <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId($disagreepopupblockid)->toHtml(); ?>
    </div>
</div>

在控制台中，当我第三次刷新页面时出现此错误：

Uncaught TypeError: No method named "openModal"
    at HTMLDivElement.<anonymous> (bootstrap.bundle.js:4795)
    at Function.each (jquery.js:370)
    at jQuery.fn.init.each (jquery.js:137)
    at jQuery.fn.init._jQueryInterface [as modal] (bootstrap.bundle.js:4783)
    at HTMLDocument.<anonymous> (ageverification.js:69)
    at fire (jquery.js:3232)
    at Object.add [as done] (jquery.js:3291)
    at jQuery.fn.init.jQuery.fn.ready (jquery.js:3542)
    at mageJsComponent (ageverification.js:38)
    at main.js:31

我在刷新时显示 1 个模式，在弹出窗口中，有 2 个按钮，一个用于确认，第二个用于退出，如果单击确认按钮，则应将其重定向到主页，或者如果单击退出则显示第二个弹出窗口。