Функция jquery для отображения сообщений не работает в ie10, но работает в Chrome

0

У меня есть страница, на которой нажатие на кнопку отображает сообщение, которое выполняется через jquery. Предупреждение - это div, в котором функция jquery добавляет/удаляет необходимый класс и вставляет сообщение.

Это div:

<div class="modal fade in" id="dialogModal">
        <div class="uk-notify uk-notify-top-center" style="display: none;">
            <div class="uk-notify-message alert-dismissable alert alert-success" style="opacity: 1; margin-top: 0px; margin-bottom: 10px;">
                <a class="close" data-dismiss="alert">×</a>
                <div id="alertSuccessMsg">
                </div>
            </div>
        </div>
        <div class="modal-dialog" id="modalContainer">

        </div>
    </div>

И это функция jquery:

function ShowSuccesMessage(data) {
        $('.uk-notify-message').removeClass('alert-danger');
        $('.uk-notify-message').addClass('alert-success');
        $('.uk-notify-top-center').fadeIn();
        $('#alertSuccessMsg').html(data);       
        window.setTimeout(function () { $('.uk-notify-top-center').hide(); }, 3000);
    }

Примечание: в приведенной выше функции данные представляют собой строковое сообщение

И это css:

.alert-danger {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}
.alert-success {
  color: #468847;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.uk-notify-message {
  position: relative;
  margin-bottom: 10px;
  padding: 15px;
  font-size: 16px;
  line-height: 22px;
  border-radius: 3px;
  padding-right: 35px;
  cursor: pointer;
}
.uk-notify-message.alert.alert-normal {
  background: #444444;
  color: #ffffff;
}
.uk-notify-message > .close {
  visibility: hidden;
}
.uk-notify-message:hover > .close {
  visibility: visible;
}

.alert-dismissable .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}

Вышеизложенное работает отлично в хроме, но не в IE 10. Я попытался сохранить

<head title=""><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"></head>

в теге головы, но это не повлияло. Может кто-нибудь предложить средство.

РЕДАКТИРОВАТЬ

Кнопка появляется на всплывающем окне, которое является частичным видом. Вот код html кнопки:

<button type="submit" class="btn btn-primary" name="Command" id="btnWorkflowSave" value="Save">Save</button>

и функция jquery:

 $('#btnWorkflowSave').click(function (e) {
                var id = $(this).attr('id');
                e.preventDefault();
                if (!CheckValidations()) {
                    return false;
                }
                if (m == 'NEW' && $(this).val() == 'Save') {
                    $.ajax({
                        cache: false,
                        type: "POST",
                        url: '@Url.Content("~/Workflow/CheckWorkflowIdAvailability")',
                        data: { workflowId: $("#workflowIdVal").val() },
                        dataType: "json",
                        success: function (response) {
                            if (response == false) {
                                ShowSuccessMessage('@AppResources.WORKFLOWID_EXITS');
                            }
                            else {
                                var form = $("#CreateNewWorkflowDetailsForm");
                                var formCollection = form.serialize() + "&Command=Save";
                                $.post('@Url.Action("CreateNewWorkflowDetails", "Workflow")', formCollection, function (data) {
                                    if (data = true) {

                                        ShowSuccesMessage('@AppResources.WORKFLOWID_SAVED_SUCCESS');
etc...

Примечание: в IE 10 вызывается метод ShowSuccessMessage, потому что я сохраняю предупреждение, и я вижу, что он называется. Так что я думаю, что это скорее проблема css или jquery

Изображение с консоли разработчика в IE:

Изображение 174551

  • 0
    Можете ли вы опубликовать скрипку, повторяющую проблему?
  • 0
    jsfiddle.net/Lwfv9Lo1 - для меня эта скрипка работает в IE 10 - вы можете добавить код, где вы вызываете функцию?
Показать ещё 7 комментариев
Теги:

2 ответа

0
Лучший ответ

Оказывается, всплывающее окно сообщения скрывалось за основным всплывающим окном в IE. Поэтому я добавил сообщение div в основное всплывающее окно, и оно решило проблему.

Я добавил это в функцию jquery:

$('.uk-notify-top-center').appendTo($('#mainDiv'));

Большое спасибо @FrankProvost за помощь.

Поделиться
0

Поскольку я не смог воспроизвести ошибку в IE 9 IE 10 или IE 11, я предлагаю следующий ответ:

В вашем css у вас слишком много скобок, поэтому вы можете изменить:

.uk-notify-message > .close {
    visibility: hidden;
}

.uk-notify-message:hover > .close {
    visibility: visible;
}
    padding-right: 35px;
}

в

.uk-notify-message > .close {
    visibility: hidden;
}

.uk-notify-message:hover > .close {
    visibility: visible;
    padding-right: 35px;
}
Поделиться
  • 0
    извините, что была опечатка ... я исправил
  • 0
    Есть ли у вас такая же проблема при открытии кода в предоставленном jsfiddle? Я абсолютно не могу воспроизвести вашу ошибку.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню