스택 오버플로에서와 같이 팝업 메시지를 표시하는 방법

스택 오버플로에서와 같이 팝업 메시지를 표시하는 방법

로그인하지 않고 투표 버튼을 사용하려고 할 때 스택 오버플로에 나타나는 팝업 메시지를 추가하고 싶습니다.

그것을 달성하기 위한 가장 좋은 방법은 무엇입니까?jquery library를 사용해서 이루어집니까?

편집: 아래 코드는 새 배지를 받았을 때 화면 상단에 표시되는 막대를 복제하는 방법, 현장에 먼저 오는 방법 등을 보여줍니다.너무 빨리 댓글을 달거나 자신의 질문에 투표하는 등의 방법으로 표시되는 호버링 대화의 경우, 이 질문을 확인하거나 예제로 바로 이동합니다.

---

스택 오버플로의 작동 방식은 다음과 같습니다.

이 마크업은 처음에는 숨겨두었던 마크업이므로 다음과 같이 페이드할 수 있습니다.

<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를 사용한 javascript입니다.

$(document).ready(function() {
    $("#message").fadeIn("slow");
    $("#message a.close-notify").click(function() {
        $("#message").fadeOut("slow");
        return false;
    });
});

그리고 voila.페이지 설정에 따라 화면에 표시된 본문 여백 상단을 편집할 수도 있습니다.

이것은 그것이 실행중인 데모입니다.

체크아웃 jQuery UI 대화상자

저는 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초 후에 모든 (색이 바래지 않는 스타일) 메시지가 실제로 사라지는지 몰랐습니다.

부트스트랩을 점검합니다.팝업 효과, 모델, 전환, 경고 등에 기반한 모든 것이 있습니다.javascript그리고.css.

언급URL : https://stackoverflow.com/questions/659199/how-to-show-popup-message-like-in-stack-overflow