使用javascript动态添加Materialize modal答案

【问题标题】：Dynamically add Materialize modal with javascript使用javascript动态添加Materialize modal
【发布时间】：2018-12-29 09:44:47
【问题描述】：

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

图片

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>

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 元素中看到它。）

【问题讨论】：

标签： javascript modal-dialog materialize

【解决方案1】：

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

【讨论】：

@sphoenix 你能添加关于你的submit_button 函数的更新吗？
你能解释一下你的意思吗？我没有函数名submit_button
表单正在由ajax提交到一个rest api，如果响应失败则执行上面的js代码来加载模态

【解决方案2】：

能否提供 codepen/JSfiddle 链接？如果您说 html 已附加到页面，您可以通过检查元素来查看它。所以基于此有两种可能：

如果您为此模态使用插件，它可能没有被触发。
CSS 存在一些问题。

请分享一个链接或 CSS 代码，以便我检查哪里出错了。因为如果它已附加，则 HTML 端没有问题。只有触发模态或使用 CSS。希望这可以帮助！

【讨论】：

是的......没有触发器......但事情是我不想要一个按钮来触发模式。我只希望在用户提交错误答案时打开模式。
用户的 ans 使用 ajax 发送到服务器，如果服务器响应为 failed，那么我想加载模式。
所以在你的 AJAX 错误回调中你可以触发模态。例如，如果您使用引导程序，您可以编写以下代码来显示它： $("#modal").modal('show');
我正在使用materialize css ...这是链接materializecss.com/modals.html#！
这就是我正在做的！上面的js代码来自Ajax的错误回调！它不起作用，伙计:(

【解决方案3】：

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

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

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

根据doc，我正在创建一个模态的实例，方法是初始化它，然后在这个实例上调用open方法来打开模态。

【讨论】：