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

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

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

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

我的测试模式内容（\u TestContentModal）：

最后，父页面有以下脚本来处理模式：

<partial name="_TestModal" />

<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>

(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));

---

要清楚：颜色没有明显变化。浏览器控制台中没有报告错误，因此添加了警报以查看元素的响应方式。除去警报，张白兰度的回答显示了预期的行为，但在我的例子中，不管有没有定时器延迟，它都不会变黄。同样，警报只是作为调试辅助添加的。

您的意思是要在更改后的警报之前将测试背景颜色显示为黄色吗

如果这是您的要求，我建议您可以尝试使用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, 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, 255, 0)
        // After change:  rgba(255, 255, 0)
    }
</script>

×
背景色测试
将背景更改为黄色
接近
函数UpdateDetails（newColor）{
警报（'beforchange:'+$（'#test'）.css（“背景色”）；//变更前：rgba（0,0,0）
$（'#test'）.css（“背景色”，newColor）；
setTimeout（函数（）{alert（'After change:'+$（'#test'））.css（“背景色”）；}，1）
//更改后：rgba（255，255，0）
//再次单击确认颜色已更新：
//更改前：rgba（255，255，0）
//更改后：rgba（255，255，0）
}

结果:

---

谢谢你，白兰度，这就是我们的目的，但在我的情况下，背景一点颜色都没有改变。我已经用处理模式的相关信息更新了我的帖子——问题似乎在于我如何处理模式，因为你似乎对那部分代码没有同样的问题。你有没有尝试使用不同的浏览器来检查这种情况是否再次发生？发生在IE、Edge、Chrome中。我们不使用其他的。

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));

<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, 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, 255, 0)
        // After change:  rgba(255, 255, 0)
    }
</script>