Question

在模板页面中，我有一个图像和一个输入字段。图像是一个难题。如果用户提交了错误答案，我想向用户显示一条带有消息的模式。因此，仅当用户提交错误答案时，模态才会加载。

图片

html

<!-- show modal -->
        <div id="error" style="margin-top: 120px">
            <div id='modal1' class='modal modal-fixed-footer'></div>
        </div>

        <img class="materialboxed" width="480" height="200" src="{{ img_url }}" style="margin-top: 50px">
        <form class="" id="puzzle_form" name="puzzle_form" method="post" style="margin-left: 20px; margin-top: 10px">
            {% csrf_token %}
            <div class="row">
                <div class="input-field">
                    <i class="material-icons prefix">sentiment_very_satisfied</i>
                    <input id="answer" name="answer" type="text" class="validate" required>
                    <label for="answer">Your answer here...</label>
                </div>
            </div>
            <div class="row">
                <button id="submit_button" class="btn waves-effect waves-light" type="submit" style="margin-left: 90px">
                    Submit
                    <i class="material-icons right">send</i>
                </button>
            </div>
        </form>

js

let _html = "<!-- Modal Structure -->";
_html += "<div class='modal-content'>";
_html += "<h4>Modal Header</h4>";
_html += "<p>A bunch of text</p>";
_html += "</div>";
_html += "<div class='modal-footer'>";
_html += "<a href='#!' class='modal-close waves-effect waves-green btn-flat'>Agree</a>";
_html += "</div>";

$('#error').ready(function () {
    $('.modal').append(_html);
    $('.modal').modal();
});

但是，当用户提交错误答案时，该模式将不会显示在HTML页面中。（尽管已加载。我可以从Inspect元素中看到它。）

Answer 1

您是否尝试过在htop按钮中添加class="modal-trigger"？

Answer 2

能否提供codepen / JSfiddle链接？如果您说html已添加到页面上，则可以通过执行inspect元素来查看它。因此，基于此，有两种可能性：

如果您为此模式使用插件，则可能尚未触发。
CSS出现问题。

请共享一个链接或 CSS代码，以便我可以检查出哪里出了问题。原因在于是否已将其附加到HTML末尾。仅在触发模式或CSS时使用。希望这可以帮助！

Answer 3

我所做的是，在Ajax的错误回调中，我编写了这段代码。

$('#error').ready(function () {
    $('.modal').append(_html);

    let _modal = document.querySelector('.modal');
    let instance = M.Modal.init(_modal);
    instance.open();
});

根据doc，我通过初始化模态创建一个实例，然后在该实例上调用open方法以打开模态。

使用javascript动态添加Materialize模态

3 个答案: