Блог

[Решено — у меня было два модала, определенных с разными идентификаторами, но когда я отключил один, он работал, как ожидалось. Изменил его так, чтобы весь контент проходил через один модальный. В какой-то момент я могу вернуться, чтобы выяснить, где был конфликт.]

У меня есть основная страница mvc, на которой у меня есть модальный, который использует частичное представление. В модальном я хотел бы представить сводный список и позволить пользователю щелкнуть элемент в списке, чтобы просмотреть дополнительные сведения о модальном. Однако, пока элемент сообщает, что он был изменен (с помощью проверки предупреждения), он не обновляется заметно. Затем я создал простой тест для изменения цвета фона div, чтобы проверить, действителен ли сам подход.

В этом случае предупреждения указывают, что цвет был изменен, но, опять же, он визуально не меняется. Итак, вопрос в том, как я могу динамически обновлять текст или CSS в модальном диалоговом окне с помощью функции js / jquery? Возможно ли это вообще? Я не заинтересован в перезагрузке модального.

Мой тестовый модальный контент (_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, 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, 255, 0)
        // After change:  rgba(255, 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));
  

Чтобы было ясно: цвет заметно не меняется. В консоли браузера не сообщается об ошибках, поэтому были добавлены предупреждения, чтобы увидеть, как реагирует элемент. За вычетом предупреждений ответ Брандо Чжана демонстрирует ожидаемое поведение, но в моем случае он не становится желтым, с задержкой таймера или без нее. И снова, предупреждения были добавлены только в качестве средства отладки.

Вы имеете в виду, что хотите показать цвет фона теста на желтый перед предупреждением после изменения?

Если это ваше требование, я предлагаю вам попробовать использовать 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>
  

Результат: