1
JavaScript 팝업이 10 회 제대로 작동하고 그 후에 표시가 중지됩니다. 의미 링크를 클릭하면 잘 표시됩니다. 두 번째 시간은 잘 작동합니다. 11 번째 시도에서 팝업에 실패합니다. 그것은 나타나지 않습니다. 페이지를 새로 고침하고 다시 클릭하면 10 회 동안 정상적으로 표시됩니다. 캐시 문제 일 것 같습니다.10 회 클릭 후 JavaScript 팝업이 표시되지 않습니다.
function toggle(div_id) {
var el = document.getElementById(div_id);
if (el.style.display == 'none') { el.style.display = 'block';}
else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=blanket_height/2-200;//100 is half popup's height
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2-250;//250 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
function doAjaxGet(alertId) {
$.ajax({
type : "GET",
url : "alerts/alertNotification.htm",
dataType : 'json',
data : "alertId=" + alertId,
success : function(response) {
$("#popUpDiv").remove();
$("#popUpDiv").append("<table>");
$("#popUpDiv").append("<tr><th>ID</th><th>Event Type</th><th>Process Name</th><th>Status</th><th>Notification Sent</th><th>Text</th></tr>");
$("#popUpDiv").append("<tr><td>" + response.alertId + "</td><td>" + response.eventTypeName + "</td><td>" + response.processName + "</td><td>" + response.status + "</td><td>" + response.notificationSent + "</td><td>" + response.comments + "</td></tr>");
$("#popUpDiv").append("</table>");
popup('popUpDiv');
},
error : function(e) {
alert('Error: ' + e);
}
});
}
$(document).ready(function() {
// Bind click event to a link
// Cancel the mouseup event in the popup
$("#popUpDiv").mouseup(function() {
return false;
});
// Bind mouseup event to all the document
$(document).mouseup(function(e) {
// Check if the click is outside the popup
if($(e.target).parents("#popUpDiv").length==0 && !$(e.target).is("#popUpDiv")) {
// Hide the popup
$("#popUpDiv").slideUp("fast");
$("#blanket").slideUp("fast");
}
});
});
내 HTML은 다음과 같습니다
<td align="center"><input type="hidden" id="alertName" name="alertName${count}" value="${alert.alertName}" />
<label><a onclick="doAjaxGet(${alert.id})" href="#"><c:out value="${alert.alertName}"></c:out></a></label>
<div style="display: none;" id="blanket"></div>
<div style="display: none; background: none;" id="popUpDiv"></div>
</td>
html로 된 'alertName $ {count}'는 무엇입니까? – P5Coder
$ {count}는 행 번호입니다. 목록의 항목에 따라 행을 표시하는 for 루프가 있습니다. 고유 한 각 입력의 이름을 만들기 위해 $ {count}에 "alertName"을 추가했습니다. –