将公告栏添加到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>

现在，我如何在wordpress中实现JS，以便在用户单击"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/