Question

我正在尝试构建自己的消息提示，错误，警告等插件，但我想允许消息排队。

我做的方式是在我的html中包含一个模态（这样我也可以在其中包含标准的消息类型名称，例如＆＃39;错误＆＃39;，＆＃39;警告＆＃39;或使用JSTL进行翻译）并使用以下方法调用：

function message(messageText, messageType) {
    $('#message').text(messageText);
    $('#messageIcon').removeClass();
    if (messageType == messageTypes.ERROR) {
        $('#messageIcon').addClass("glyphicon glyphicon-remove-circle text-danger");
        $('#messageHeader').text($(" " + '#ERROR').text());
    } else if (messageType == messageTypes.WARNING) {
        $('#messageIcon').addClass("glyphicon glyphicon-warning-sign text-warning");
        $('#messageHeader').text(" " + $('#WARNING').text());
    } else if (messageType == messageTypes.INFO) {
        $('#messageIcon').addClass("glyphicon glyphicon-info-sign text-primary");
        $('#messageHeader').text(" " + $('#INFO').text());
    }
    $('#messageModal').modal();
}

但是这只允许在仍然显示时更改模态，因此只会显示最后一条消息。我尝试将该函数的代码包装在：

中

$('#messageModal').on('hidden.bs.modal', function (e) {
    //above code
}

我认为只有当模态处于隐藏状态时才触发该函数是合乎逻辑的......但这并不起作用。有没有办法解决它，或者我做错了吗？

Answer 1

使用jQuery.queue（）在队列中实现消息传递。有关详细信息，请查看https://stackoverflow.com/a/3314877/383474

我离开你的功能而没有任何修改，只是在队列中添加了一些消息，并添加了按钮以逐个启动队列..

                var messages = $({});
                var messageTypes = {ERROR: 'ERROR', WARNING: 'WARNING', INFO: 'INFO'};                    
                $.each([
                    {message: 'message1', type: 'ERROR'},
                    {message: 'message2', type: 'WARNING'},
                    {message: 'message3', type: 'INFO'}],
                    function(i, data)
                    {
                        messages.queue('messages', function() 
                        {
                            message(data.message, data.type)
                        }); 
                    }
                );

                $("<button>", {
                    text: 'show message', 
                    click: function () {
                        showNextQueuedMessage()
                    }
                }).appendTo('body');   

                function showNextQueuedMessage()
                {
                    messages.dequeue('messages');                        
                }

Bootstrap：按顺序打开模态

1 个答案: