clearTimeout() is not working

Question

I've got a little function which ables to handle pop-up windows on my page, and there is a little problem with clearTimeout. Please take a look at the code:

function toggleModal(et, delayed) {

        if(et.hasClass('acc-edit-fn')) {
            if($.browser.msie) {$('#opacity-modal').height($(document).height()).toggleClass('acc-edit-fn');
                }
            else {$('#opacity-modal').height($(document).height()).toggleClass('acc-edit-fn').fadeTo('fast', 0.5);
                }   
            et.html($(this).html()).toggleClass('acc-edit-fn');
            if(delayed > 0) {       
                var dtf = setTimeout(function(){et.toggleClass('acc-edit-fn'); }, delayed);
                var dts = setTimeout(function(){$('#opacity-modal').toggleClass('acc-edit-fn').removeAttr('style');}, delayed);          
            }   
        }
        else {
            $('#opacity-modal').toggleClass('acc-edit-fn').removeAttr('style');
            et.toggleClass('acc-edit-fn');  
            clearTimeout(dtf);
            clearTimeout(dts);
        }
    };

So basically if you are calling func with "delayed" > 0, it will call automatic close after defined value. But, if there is any button in pop-up which allows to close it before timer, pop-up will appear right after timer will be executed. I've tried to clear timeouts with clearTimeout(), but bug is still there. You can check it on fiddle here: http://jsfiddle.net/LvVu9/ just click red button, and then click "ok" button.

Answer 1

dtf and dts both are out of the scope(where you do clearTimeout). So you can define these global.

Something like that:

var dtf = null;
var dts = null;
function toggleModal(et, delayed) {

        if(et.hasClass('acc-edit-fn')) {
            if($.browser.msie) {$('#opacity-modal').height($(document).height()).toggleClass('acc-edit-fn');
                }
            else {$('#opacity-modal').height($(document).height()).toggleClass('acc-edit-fn').fadeTo('fast', 0.5);
                }   
            et.html($(this).html()).toggleClass('acc-edit-fn');
            if(delayed > 0) {       
                dtf = setTimeout(function(){et.toggleClass('acc-edit-fn'); }, delayed);
                dts = setTimeout(function(){$('#opacity-modal').toggleClass('acc-edit-fn').removeAttr('style');}, delayed);          
            }   
        }
        else {
            $('#opacity-modal').toggleClass('acc-edit-fn').removeAttr('style');
            et.toggleClass('acc-edit-fn');  
            clearTimeout(dtf);
            clearTimeout(dts);
        }
    };