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

來源

2015-03-31 nitinvertigo

你可以發佈一個複製問題的小提琴嗎？ – 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對他的幫助。

來源

2015-03-31 09:22:10 nitinvertigo

因爲我無法在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; 
}

來源

2015-03-31 08:32:14

對不起，這是一個錯字...我已經糾正了它 – 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中工作，但在鉻中工作

回答

相關問題