繁体   English   中英

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

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

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有一个页面,单击按钮会显示一条通过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中开发者控制台的图像:

在此处输入图片说明

2 个回复

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

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

我将此添加到jquery函数:

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

非常感谢@FrankProvost的帮助。

2 .animate()在IE10中不起作用,但在IE9,IE8,IE7,Chrome和FF中起作用

在此网站上,当您将鼠标悬停在框上时,div从左侧滑入。 由于某些原因,它可以在除IE10之外的所有现代浏览器上使用。 在IE10上,将鼠标悬停在框上没有任何反应。 下面的代码。 我包括了周围的代码,以防万一其中有什么原因造成了这种情况。 而且,IE10的控制台中没有任何显示,这使调试它 ...

5 为什么这在IE10中不起作用,但在IE7中起作用

我有一个表格,我想分为三个不同的部分,每个部分都带有一个“下一个”和“后退”按钮,分别显示下一个或上一个部分。 在大多数情况下,它的工作方式是我想要的,除了IE10 +。 它适用于Firefox,Chrome和IE7(不确定8和9)。 代码不起作用的部分是: 这是JSFiddl ...

6 jQuery悬停在IE10中不起作用,但在较低的IE版本中起作用

在我的网站上,框应该淡入了描述中。 除了IE10,这在我尝试过的所有浏览器中均可使用。 这是一个WordPress网站,我使用9个插件。 我曾尝试停用所有插件,但悬停组件仍无法在IE10中使用。 以下是我用于悬停的代码: 有人可以帮我找出问题所在吗? 如果我遗漏了任何重要信 ...

7 在IE10中不起作用

大家好,我想在代码中的选项值之间留空格,只有第一个选项值在IE10中有效,而第二个和第三个选项在其他浏览器中也无法正常工作f9。 有人请帮我 这是代码: ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM