Bootstrap自定义警报点击关闭，并x x大量时间

Question

我要做的是将定制消息框添加到一个时间函数，以使消息框隐藏为x的时间，但是只有当用户单击适当的时间时按钮。（解雇）

我正在尝试利用Bootstrap，但现在我认为我还需要一些jQuery代码。

这是我用来显示消息的内容：

 <div class="notifier-box">
         <div class="custompm fade" id="message1">
           <p><a href="{U_PRIVATEMSGS}"> {L_YOU_HAVE} {PRIVATE_MESSAGE_INFO</a></p>
           <button data-dismiss="alert" class="btn btn-small">{L_DISMISS}</button>
         </div>
    </div>

使用此功能：

<script>
head.ready(function () {
// some callback stuff
$('#message1').toggleClass('in');
});
</script>

Answer 1

首先，您检查了Bootstrap警报的正确实现（在此处进行一些示例）：

<div class="alert alert-warning fade in" id="message1">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>

使用jQuery，您需要将计时器设置为 auto 删除警报框，然后将事件绑定到按钮，该按钮将单击以下单击：

$(function(){
    setInterval(function(){
         $("#message1").alert('close');
    },3000); // milliseconds to auto dismiss
    $("#button_dismiss").on('click', function(){
         $("#message1").alert('close');
    });
});

更新：根据您的评论：

<div id="message1">I am an alert!</div>
<script>
    $(function(){
        // Set a global timeout handler
        var timeoutHandle = window.setTimeout(function(){
            $("#message1").addClass('hide');
        }, 2000);
        $("#some-button").on('click', function(){
            // Clear current timeout
            window.clearTimeout(timeoutHandle);
            $("#message1").removeClass('hide');
            timeoutHandle = window.setTimeout(function(){
                $("#message1").addClass('hide');
            }, 2000);
        });
   });
</script>