一段时间后的blockUI

Question

when I click on a button I use this

   $(document).ready(function () {
        $('.find').click(function () {
            $.blockUI({
                message: '<table><tr><td><img src="images/please_wait.gif"/></td></tr></table>',
                css: {},
                overlayCSS: {
                    backgroundColor: '#FFFFFF',
                    opacity: 0.4,
                    border: '0px solid #000000'
                }
            });
        });
    });

that shows a waiting image message. Now I want to show another message after some time(for example after 30seconds). I don't know if I have to use the setTimeOut expression or other? Any suggestion?

Answer 1

Use setTimeout

$(document).ready(function () {
    $('.find').click(function () {
        $.blockUI({
            message: '<table><tr><td><img src="images/please_wait.gif"/></td></tr></table>',
            css: {},
            overlayCSS: {
                backgroundColor: '#FFFFFF',
                opacity: 0.4,
                border: '0px solid #000000'
            }
        });

        setTimeout(function(){
           $.unblockUI();
           alert("New Message after 30 seconds");
        }, 30000);
    });
});

After 30 seconds UI will unblock and a new alert message will display.

Hope this will help you.

Answer 2

Try this code: After your first message popup is closed, it will wait for 30 seconds and then trigger another message popup.

            $.blockUI({
                message: '<table><tr><td><img src="images/please_wait.gif"/></td></tr></table>',
                css: {},
                overlayCSS: {
                    backgroundColor: '#FFFFFF',
                    opacity: 0.4,
                    border: '0px solid #000000'
                },
                onUnblock : function(){
                    setTimeout(function(){
                        $.blockUI({
                            message: '<table><tr><td><img src="images/please_wait.gif"/></td></tr></table>',
                            css: {},
                            overlayCSS: {
                                backgroundColor: '#FFFFFF',
                                opacity: 0.4,
                                border: '0px solid #000000'
                            }
                        });
                    }, 30000);
                }
            });