javascript - 将公告栏添加到 Wordpress

Question

我正在尝试将公告栏添加到 wordpress 页面。我知道如何添加栏，但我也希望它在用户单击栏上的“x”时消失。

我到目前为止的代码：

CSS

#message_box {
position: absolute;
top: 0; left: 0;
z-index: 10;
background:#ffc;
padding:5px;
border:1px solid #CCCCCC;
text-align:center;
font-weight:bold;
width:99%;
}

html

<div id="message_box">
    <img id="close_message" style="float:right;cursor:pointer" src="...." />
    TEXT HERE
</div>

现在我如何将 JS 实现到 wordpress 中，以便在用户单击“x”图像时通知消失？

Answer 1

当您还没有使用 jQuery 时，您可以只使用纯 Javascript。只为 4 行代码加载 jQuery 有点过头了。

document.getElementById("close_message").onclick = function() {
    document.getElementById("message_box").style.display = 'none';
};

Answer 2

你可以使用一个简单的 jQuery 函数

$(function(){
    $('#close_message').click(function(){
        $('#message_box').remove();
    });
});

示例：http: //jsfiddle.net/qsfjC/