语义UI模态一打开就关闭

Question

我对语义UI还是陌生的，但真的很喜欢到目前为止所看到的内容。我正在开发一个允许用户使用Spring MVC框架和Thymeleaf审阅文档的站点/应用程序。

审阅者单击一个按钮，它会显示其审阅文档的PDF。他们可以留下评论，这些评论被输入数据库并显示为表格，以便作者在所有评论完成后进行评估。我还想增加评论者编辑评论的功能。

我有两个模态。当审阅者想要添加新评论时调用一个，当审阅者想要编辑评论时调用一个。它们的样式相同，但是主要区别在于编辑模式会在文本输入中预加载注释。

添加注释的模式非常有效。更新评论的模态没有。它会打开，在文本框中加载评论内容，然后立即关闭。

下面是代码：

jQuery：

$(document).ready(function() {
    $("#addComment").click(function(){
        $('#addCommentModal').modal('show');
    });

    $(".modifyCommentButton").click(function(){
        $('#modifyCommentModal').modal('show');
        $('#commentInput').val($(this).parent().parent().siblings('.commentContent').text());
     });
 });

模式：

<div id="modifyCommentModal" class="ui basic modal">
    <div class="ui icon header">
        <i class="blue plus circle icon"></i>
    </div>
    <div class="actions">
        <div  class="content">
            <form  th:action="@{'/addcomment/'+${review.getTaskId()}}" th:object="${newComment}" method="post" class="ui form">
                <input id="commentInput" class="field" type="text" th:field="*{comment}" />
                <button id="modifyButtonAdd" class="ui green animated inverted fade button" tabindex="0">
                    <div class="visible content">Add</div>
                    <div class="hidden content">
                        <i class="checkmark icon"></i>
                    </div>
                </button>
                <button id="modifyButtonCancel" class="ui red animated inverted fade button cancel" tabindex="0" type="reset">
                    <div class="visible content">Cancel</div>
                    <div class="hidden content">
                        <i class="remove icon"></i>
                    </div>
                </button>
            </form>
        </div>
    </div>
</div>

<div id="addCommentModal" class="ui basic modal">
    <div class="ui icon header">
        <i class="blue plus circle icon"></i>
    </div>
    <div class="actions">
        <div  class="content">
            <form  th:action="@{'/addcomment/'+${review.getTaskId()}}" th:object="${newComment}" method="post" class="ui form">
                <input id="" class="field" type="text" th:field="*{comment}" />
                <button id="formButtonAdd" class="ui green animated inverted fade button" tabindex="0">
                    <div class="visible content">Add</div>
                    <div class="hidden content">
                        <i class="checkmark icon"></i>
                    </div>
                </button>
                <button id="formButtonCancel" class="ui red animated inverted fade button cancel" tabindex="0" type="reset">
                    <div class="visible content">Cancel</div>
                    <div class="hidden content">
                        <i class="remove icon"></i>
                    </div>
                </button>
            </form>
        </div>
    </div>
</div>

我意识到我需要在审阅模式中执行不同的操作，才能将评论写到原来所在的字段中……但是我要弄清楚的是，当我保持审阅模式时，请保持打开状态。 ：）

任何见识将不胜感激！谢谢！

Answer 1

您解决了这个问题吗？我遇到了同样的问题。