jquery funciton to display message does not work in ie10 but works in chrome

Question

I have a page where clicking on a button displays a message which is done through jquery. The alert is a div wherein the jquery function adds/removes the required class and inserts a message.

This is the 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>

And this is the jquery function:

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

Note: in the above function data is a string message

And this is the 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;
}

The above works perfectly in chrome but not in IE 10. I have tried keeping

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

in the head tag but it had no effect. Can someone suggest a remedy.

EDIT

The button comes up on a popup which is a partial view. Here is the html code of the button:

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

and the jquery function:

 $('#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...

Note: in IE 10, the method ShowSuccessMessage is called because I keep an alert and I can see it being called.So I am thinking this is more of a css or jquery issue

The image from the developer console in IE:

Answer 1

Since i could not reproduce the error in IE 9 IE 10 or IE 11 i suggest the following answer:

In your css you have one bracket too much, so you might change:

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

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

to

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

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

Answer 2

It turns out that the message popup was hiding behind the main popup in IE. So I appended the message div to the main popup and it solved the issue.

I added this to the jquery function:

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

A big thanks to @FrankProvost for his help.