jquery funciton显示消息不能在ie10中工作，但在铬中工作

问题描述：

我有一个页面，点击一个按钮显示一个消息，这是通过jQuery完成的。警报是一个div，其中jquery函数添加/删除所需的类并插入消息。jquery funciton显示消息不能在ie10中工作，但在铬中工作

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

头标记，但它没有任何效果。有人可以提出补救措施吗？

EDIT

按钮上来上的弹出这是一个局部视图。这里是按钮的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被调用，因为我一直在警告，我可以看到它是called.So我想这更多的是CSS或jQuery的问题

从开发者控制台中IE的形象：

enter image description here

你可以发布一个复制问题的小提琴吗？ – ArinCool 2015-03-31 07:43:14

https://jsfiddle.net/Lwfv9Lo1/ - 对于我这个小提琴在IE 10中工作 - 你可以在你调用函数的地方添加代码吗？ – 2015-03-31 07:46:09

Sry - 它在IE 11中为我工作，我目前没有IE 10来测试 – 2015-03-31 07:59:01

答

事实证明，该消息弹出躲在IE主弹出后面。所以我将消息div附加到主弹出窗口，并解决了问题。

我已将此添加到jQuery函数：

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

非常感谢@FrankProvost对他的帮助。

答

因为我无法在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; 
}

对不起，这是一个错字...我已经纠正了它 – nitinvertigo 2015-03-31 08:34:20

当你在提供的jsfiddle中打开代码时，你有同样的问题吗？我绝对不能重现你的错误。 – 2015-03-31 08:41:59

小提琴在IE10中运行正常....没有任何错误信息 – nitinvertigo 2015-03-31 08:45:32

jquery funciton显示消息不能在ie10中工作，但在铬中工作

相关推荐