jQuery funciton显示消息在ie10中不起作用，但在chrome中起作用

Question

我有一个页面，单击按钮会显示一条通过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;
}

上面的内容在chrome中可以完美运行，但在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中开发者控制台的图像：

Answer 1

由于我无法在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;
}

Answer 2

原来，消息弹出窗口隐藏在IE中的主弹出窗口后面。 因此，我将消息div附加到了主弹出窗口，它解决了该问题。

我将此添加到jquery函数：

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

非常感谢@FrankProvost的帮助。