![](/img/trans.png)
[英]On Click Event is not working in Chrome and FireFox, but works fine in the IE browers
[英]Modal popup works in FireFox but not other browers
我已经开发了一个模式弹出窗口,单击按钮时会弹出一个屏幕。
可以是AddToBasketButton单击事件,也可以是AskqlnkBtn单击事件,它将打开窗口。
我的代码可以在FireFox中完美运行,但不能在Internet Explorer / Chrome中运行。
运行代码时,没有可见的JavaScript错误(据我所知)。
在旧的浏览器中单击链接时,屏幕变暗,因此loadPopup必须以某种方式工作。
自己看问题:
如果您想在我的网站上体验代码, 可以在这里查看。 。 如果您点击“Lægi kurv”按钮,那么您可以自己尝试一下。
任何想法可能有什么问题吗? 我已经看了几个小时了,没有头绪!
我的代码 :
function loadPopup() {
//loads popup only if it is disabled
if ($('#<%=bgPopup.ClientID %>').data("state") == 0) {
$('#<%=bgPopup.ClientID %>').css({
"opacity": "0.7"
});
$('#<%=bgPopup.ClientID %>').fadeIn("medium");
$('#<%=ReportError.ClientID%>').fadeIn("medium");
$('#<%=bgPopup.ClientID %>').data("state", 1);
}
}
function disablePopup() {
if ($('#<%=bgPopup.ClientID %>').data("state") == 1) {
$('#<%=bgPopup.ClientID %>').fadeOut("medium");
$('#<%=ReportError.ClientID %>').fadeOut("medium");
$('#<%=bgPopup.ClientID %>').data("state", 0);
}
}
function setOrdering() {
$("#contact-headline").text('Bestil produkt');
$("#contact-messagelbl").text('Evt. kommentar');
$('#<%=ContactTypeHiddenLbl.ClientID %>').val("bestil");
}
function setQuestions() {
$("#contact-headline").text('Stil spørgsmål');
$("#contact-messagelbl").text('Indtast dit spørgsmål');
$('#<%=ContactTypeHiddenLbl.ClientID %>').val("spørgsmål");
}
function centerPopup() {
$('#<%=ReportError.ClientID%>').center();
}
function resetContactControls() {
$('#<%=ContactMailBox.ClientID %>').val('');
$('#<%=ContactPhoneBox.ClientID %>').val('');
$('#<%=ReportMessageBox.ClientID %>').val('');
$('#<%=AskQuestionProductBtn.ClientID %>').show();
$('#contact-statuslbl').val('');
}
jQuery.fn.center = function () {
this.css("position", "absolute");
this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) +
$(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
return this;
};
$(document).ready(function() {
var mouseIsInside = true;
$('#<%=ReportError.ClientID%>').hover(function () {
mouseIsInside = true;
}, function () {
mouseIsInside = false;
});
$("body").mouseup(function () {
if (!mouseIsInside) {
disablePopup();
}
});
});
$('#<%=bgPopup.ClientID %>').data("state", 0);
$('#<%=AddToBasketButton.ClientID %>').click(function () {
resetContactControls();
centerPopup();
loadPopup();
setOrdering();
});
$('#<%=AskqlnkBtn.ClientID %>').click(function () {
resetContactControls();
centerPopup();
loadPopup();
setQuestions();
});
$('#<%=PopupCloseLnk.ClientID %>').click(function () {
disablePopup();
});
$(document).keypress(function (e) {
if (e.keyCode == 27) {
disablePopup();
}
});
$(window).resize(function () {
centerPopup();
});
问题是由如何定位元素引起的。 您正在定位它,好像它应该被修复。 尝试将其用作中心代码。
jQuery.fn.center = function () {
this.css("position", "fixed");
this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) + "px");
this.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) + "px");
return this;
};
我更改为position:fixed
并删除了scrollTop
。 您不希望将其放置在绝对位置,因为这将意味着它会随着页面滚动。
编辑:如果仍然无法正常工作,请使用开发工具检查元素和相关样式以查看发生了什么,或者将其添加到函数中以查看top
和left
的设置:
alert(Math.max(0, (($(window).height() - this.outerHeight()) / 2) + "px");
alert(Math.max(0, (($(window).width() - this.outerWidth()) / 2) + "px");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.