Question

我有一些模态正在加载到页面和模态触发器上。我编写了所需的jQuery代码，但仍然没有显示模式。

模态中的一个：

<div className="modal fade" id="howItWorks" tabIndex="-1" role="dialog" aria-labelledby="howItWorksTitle"
                 aria-hidden="true">
                <div className="modal-dialog modal-dialog-centered" role="document">
                    <div className="modal-content">
                        <div className="modal-header">
                            <h3 className="modal-title" id="howItWorksTitle">How it works</h3>
                            <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div className="modal-body">
                            <ul className="modal-list">
                                <li>Choose your time and schedule a session with an expert</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

模式触发器：

<div>
                <a href="#" className="how-it-works btn btn-large btn-muted" data-toggle="modal"
                   data-target="#howItWorks">
                    <span data-toggle="tooltip" title="Lorem Ipsum!" data-placement="top">
                        <img src={"../static/images/how-it-works-icon-blue.svg"}/>
                    </span>
                    How it works?
                </a>
            </div>

jQuery：

$(() => {
            $(".btn").on("click", function(e: any){
                e.preventDefault();

                $('.modal').toggleClass('is-visible');

            });
        });

我希望显示模式，但是除了页面滚动到顶部之外，什么都不会发生。

如何在nextjs中显示模态？

0 个答案: