로그인하지 않고 투표 버튼을 사용하려고 할 때 Stack Overflow에 나타나는 것과 같은 팝업 메시지를 추가하고 싶습니다.
그것을 달성하는 가장 좋은 방법은 무엇입니까? jquery 라이브러리를 사용하여 수행됩니까?
답변
편집 : 아래 코드는 새 배지를 받거나 사이트에 처음 올 때 화면 상단에 표시되는 막대를 복제하는 방법을 보여줍니다. 너무 빨리 댓글을 달려고 할 때 나타나는 호버링 대화 상자에 대해 투표 자신의 질문 등에 대해서는 이 질문을 확인하십시오. 여기서 수행 방법을 보여 주거나 예제 로 바로 이동하십시오 .
Stackoverflow가 수행하는 방법은 다음과 같습니다.
이 마크 업은 처음에는 숨겨져 있으므로 페이드 인 할 수 있습니다.
<div id='message' style="display: none;">
<span>Hey, This is my Message.</span>
<a href="#" class="close-notify">X</a>
</div>
적용된 스타일은 다음과 같습니다.
#message {
font-family:Arial,Helvetica,sans-serif;
position:fixed;
top:0px;
left:0px;
width:100%;
z-index:105;
text-align:center;
font-weight:bold;
font-size:100%;
color:white;
padding:10px 0px 10px 0px;
background-color:#8E1609;
}
#message span {
text-align: center;
width: 95%;
float:left;
}
.close-notify {
white-space: nowrap;
float:right;
margin-right:10px;
color:#fff;
text-decoration:none;
border:2px #fff solid;
padding-left:3px;
padding-right:3px
}
.close-notify a {
color: #fff;
}
그리고 이것은 자바 스크립트 (jQuery 사용)입니다.
$(document).ready(function() {
$("#message").fadeIn("slow");
$("#message a.close-notify").click(function() {
$("#message").fadeOut("slow");
return false;
});
});
그리고 짜잔. 페이지 설정에 따라 디스플레이의 본문 여백 상단을 편집 할 수도 있습니다.
답변
답변
사용 하기 쉬운 jqModal 을 사용하며 몇 가지 훌륭한 효과를 얻을 수 있습니다.
답변
AJAX 컨트롤 툴킷에서 ModalPopup 을 사용하는 것도이 효과를 얻을 수있는 또 다른 방법입니다.
답변
다음은 StackOverflow 소스에서 찾은 내용입니다. 누군가를 위해 시간을 절약하기를 바랍니다. showNotification 함수는 모든 팝업 메시지에 사용됩니다.
var showNotification=function(jClicked,msg){master.showErrorPopup(jClicked.parent(),msg)};
var showFadingNotification=function(jClicked,msg){master.showErrorPopup(jClicked.parent(),msg,true)};
//master...
showErrorPopup: function (e, h, f) {
var g = $('<div class="error-notification supernovabg"><h2>' + h + "</h2>" + (f ? "" : "(click on this box to dismiss)") + "</div>");
var i = function () {
g.fadeOutAndRemove()
};
$(e).append(g);
g.click(i).fadeIn("fast");
setTimeout(i, (f ? Math.max(2500, h.length * 40) : 1000 * 30))
}
CSS
.error-notification{z-index:1;cursor:pointer;display:none;position:absolute;padding:15px;-moz-box-shadow:2px 2px 5px #000;-webkit-box-shadow:2px 2px 5px #000;box-shadow:2px 2px 5px #000;}
.error-notification a{color:inherit;text-decoration:underline;}
.error-notification li{font-size:110%;padding-top:3px;}
.supernovabg{color:#fff !important;background-color:#fe7a15 !important;}
페이딩 타임 아웃을 설정하기 위해 메시지 길이를 사용하는 방법은 멋지다. 30 초 후에 모든 메시지가 실제로 사라진다는 것을 몰랐습니다.