使用固定导航在页面加载时实现 css 模式打开 - 不工作

Question

我正在使用 Materialize CSS 并且我的站点上有多个模式。其中一些我想在加载特定的新页面时打开。一切正常，然后我切换到固定的 nav，突然打开的命令不起作用。

似乎该功能正在运行，但它没有将模态更改为 display: block，因此它就像打开一样，但没有任何可见的东西 body overlay已开启无法滚动

我已经尝试了多种不同的方法来实现 modal.open();，据我所知，某些东西阻碍了函数的运行并覆盖了一些样式。

我很茫然。感谢任何帮助。

<body>

<!--       NAVIGATION       --->

<header>
<div class="navbar-fixed">
    <nav>
        <div class="nav-wrapper">
            <div class="row">
                <div class="col s7 m2 valign-wrapper">
                    <a class="modal-trigger" href="#login"><img src="/images/Logo.png" alt="" class="loginLogo"></a> 
                </div>
                <div class="col s5 m3 offset-m7 valign-wrapper">
                    <ul>
                        <li><button id="successBtn" data-target="signUpSuccess" class="btn btn-signUp btn-success modal-trigger">Sign up</button></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
</div>

<!-- Modal Structure -->

<div id="signUpSuccess" class="modal">
    <div class="modal-content">
        <div class="row">
            <div class="col s12">
                <h4>You're signed up!</h4>
                <p>We will notify you soon.</p>
            </div>
        </div>
    </div>
</div>

Javascript:

$(document).ready(function(){
    $('.modal').modal();
});

$(document).ready(function(){
    $("#signUpSuccess").modal();
    $("#signUpSuccess").modal("open");
});

重申 - 单击时模态框仍在工作，但 #signUpSuccess 模态框未在加载时打开，它在更改为 navbar-fixed 之前一直在工作。

具体化CSS：https://materializecss.com/modals.html

我希望这是有道理的。

Answer 1

这可以通过 instance.open() 来完成。

<script>
        document.addEventListener('DOMContentLoaded', function () {
            var Modalelem = document.querySelector('.modal');
            var instance = M.Modal.init(Modalelem);
            instance.open();
        });

</script>

查看文档Materialize Modals，动画有很多选项。您还应该尝试使用 vanilla JS，因为 jQuery 不再是依赖项。

使用固定导航在页面加载时实现 css 模式打开 - 不工作

Materialize css modal open on page load with fixed nav - not working

javascript

jquery

overlay

modal-dialog

materialize