如何使用 jQuery 實作堆疊溢位式彈出訊息？

顯示Stack Overflow 等彈出訊息

導航Stack Overflow 時，您可能會遇到彈出訊息，特別是在未登入並嘗試使用時投票功能。在應用程式中實現類似的功能比您想像的更容易。

使用 jQuery 實作

Stack Overflow 使用使用 jQuery 函式庫的彈出通知系統。以下是如何在代碼中實現它：

標記

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

CSS

<code class="css">#message {
    ...
}
#message span {
    ...
}
.close-notify {
    ...
}</code>

JavaScript (jQuery)

<code class="javascript">$(document).ready(function() {
    $("#message").fadeIn("slow");
    $("#message a.close-notify").click(function() {
        $("#message").fadeOut("slow");
        return false;
    });
});</code>

透過將這些元素合併到您的程式碼中，您可以複製Stack Overflow 的彈出訊息功能，從而為您的應用程式提供增強的使用者體驗。

以上是如何使用 jQuery 實作堆疊溢位式彈出訊息？的詳細內容。更多資訊請關注PHP中文網其他相關文章！