Yığın Taşması gibi bir açılır pencere nasıl gösterilir?

Question

Oturum açılmadığında Yığın Taşması'nda görünen gibi bir açılır ileti eklemek istiyorum ve oylama düğmelerini kullanmaya çalışıyorum.

Bunu başarmak için en iyi yöntem nedir? Bir jQuery kitaplığı kullanılarak yapıldı mı?

Answer 1

Ben jqModal kullanmak, kullanımı kolay ve aynı zamanda AJAX denetim araç seti içinde ModalPopup kullanma jQuery UI Dialog

Answer 2

elde edebilirsiniz Bu efekti almak başka bir yoludur.

Answer 3

ödeme bazı büyük etkilere

Answer 4

EDIT: Aşağıdaki kod, yeni bir rozet aldığınızda, ilk önce siteye geldiğinizde, ekranın üst kısmında görünen çubukları nasıl kopyalayacağınızı gösterir. Denediğinizde gezinme iletişim kutuları için çok hızlı bir şekilde yorum yapmak, kendi sorunuzu oylamak vb., this question adresine bakın, bunun nasıl yapılacağını göstereceğim veya sadece example adresine gidin. stilleri uygulanır İşte

<div id='message' style="display: none;"> 
    <span>Hey, This is my Message.</span> 
    <a href="#" class="close-notify">X</a> 
</div> 

:

Bu başlangıçta o kadar gizli biçimlendirme, biz bunu fade geçerli:

---

İşte Stackoverflow böyle yapar

#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; 
} 

Ve bu javascript (jQuery kullanarak):

Ve voila. Sayfa düzeninize bağlı olarak, gövde kenar boşluğunu ekranda da düzenlemek isteyebilirsiniz.

Here is a demo of it in action.

Answer 5

İşte StackOverflow kaynağını görüntülemesini bulundu budur. Umarım birileri için biraz zaman kazandırır. showNotification işlevi, tüm bu açılan iletiler için kullanılır.

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;} 

onlar solmaya zaman aşımı ayarlamak için mesajın uzunluğunu nasıl kullandıklarını Bu serin. 30 saniye sonra tüm (solmayan stil) mesajların kaybolduğunu fark etmedim.

Answer 6

bootstrap'u kontrol edin. Bazı pop-up efektleri, modalar, geçişler, uyarılar, her şey javascript ve css dayanmaktadır.