是否可以通过javascript更新模式内容？ [已解决]

如何解决是否可以通过javascript更新模式内容？ [已解决]

[已解决-我定义了两个使用不同ID的模式，但是当我禁用其中一个时，它可以按预期工作。对其进行了更改，以便所有内容都通过一种模式。在某个时候，我可能会重新访问以找出冲突的位置。]

我有一个mvc核心页面，在该页面上有一个使用部分视图的模式。在模式中，我想显示一个摘要列表，然后让用户单击列表中的一个项目以查看关于模式的其他详细信息。但是，当元素正在报告元素时，已对其进行了更改（通过警报检查），但未对其进行明显更新。然后，我创建了一个简单的测试，以更改div的背景颜色，以查看方法本身是否有效。

在这种情况下，警报会识别出颜色已更改，但同样，它在外观上也没有更改。所以问题是，如何使用js / jquery函数在模态对话框中动态更新文本或CSS？可能吗我对重新加载模式不感兴趣。

我的测试模式内容（_TestContentModal）：

<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="closeMe"><span aria-hidden="true">×</span></button>
    </div>
    <div class="modal-body">
        <div id="test">
            background color test
        </div>
        <div>
            <button onclick="UpdateDetails('yellow');">Change background to yellow</button>
        </div>
    </div>
    <div class="modal-footer">
        <button data-dismiss="modal" id="cancel" class="btn btn-default" type="button">Close</button>
    </div>
</div>
<script>
    function UpdateDetails(newColor) {
        alert('Before change:  ' + $('#test').css("background-color"));  // Before change:  rgba(0,0)
        $('#test').css("background-color",newColor);                    
        alert('After change:  ' + $('#test').css("background-color"));   // After change:  rgba(255,255,0)

        // clicking a second time confirms that the color was updated:
        // Before change:  rgba(255,0)
        // After change:  rgba(255,0)
    }
</script>

正确地单击按钮会触发该功能，并且警报会显示/确认背景色已更改，但是背景色未显着更改。单击第二个按钮确认设置了新颜色。

我对模态还比较陌生，很可能我会以完全错误的方式进行操作。预先感谢您提供任何建议或解决方案。

编辑：

包括一些用于响应初始答案的其他代码。由于上述代码似乎可以在其他地方发挥作用，因此问题必须出在模式的处理上。

在父页面上是对模式的引用：

<partial name="_TestModal" />

这是_TestModal.cs的内容：

<!--Modal-->
<div aria-hidden="true" aria-labelledby="modal-test-label" role="dialog" tabindex="-1" id="modal-test" class="modal fade">
    <div class="modal-dialog modal-lg">
    </div>
</div> 

父页面上的按钮可激活模式：

<div>
    <a class="btn btn-secondary popup"
       style="color: black;"
       data-url='@Url.Action("GetTest","Runways")'
       data-toggle="modal"
       data-target="#modal-test">
        Update<i class="fa fa-plus"></i>
    </a>
</div>

控制器的GetTest操作返回包含顶部显示的模态内容的部分：

return PartialView("_TestContentModal");

最后，父页面具有用于处理模式的脚本：

(function ($) {
    function Index() {
        var $this = this;
        function initialize() {

            $(".popup").on('click',function (e) {
                modelPopup(this);
            });

            function modelPopup(reff) {
                var url = $(reff).data('url');

                $.get(url).done(function (data) {
                    $('#modal-test').find(".modal-dialog").html(data);
                    $('#modal-test > .modal',data).modal("show");
                });
            }
        }

        $this.init = function () {
            initialize();
        };
    }

    $(function () {
        var self = new Index();
        self.init();
    });
}(jQuery));

要清楚：颜色没有明显变化。浏览器控制台中未报告任何错误，因此添加了警报以查看元素的响应方式。减去警报后，Brando Zhang的答案表明了预期的行为，但是在我的情况下，无论有没有计时器延迟，它都不会变黄。同样，这些警报只是作为调试工具添加的。

解决方法

您是说要在警报更改后将测试背景色显示为黄色吗？

如果这是您的要求，建议您尝试使用setTimeout来不立即触发警报。

更多详细信息，您可以参考以下代码：

<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="closeMe"><span aria-hidden="true">×</span></button>
    </div>
    <div class="modal-body">
        <div id="test">
            background color test
        </div>
        <div>
            <button onclick="UpdateDetails('yellow');">Change background to yellow</button>
        </div>
    </div>
    <div class="modal-footer">
        <button data-dismiss="modal" id="cancel" class="btn btn-default" type="button">Close</button>
    </div>
</div>
<script>
    function UpdateDetails(newColor) {
        alert('Before change:  ' + $('#test').css("background-color"));  // Before change:  rgba(0,0)
        $('#test').css("background-color",newColor);

        setTimeout(function () { alert('After change:  ' + $('#test').css("background-color"));  },1)
       // After change:  rgba(255,255,0)

        // clicking a second time confirms that the color was updated:
        // Before change:  rgba(255,0)
        // After change:  rgba(255,0)
    }
</script>

结果：