2013-02-12 43 views
0

我有一個jQuery彈出插件,當我提交表單時它會自動關閉。但我需要爲彈出窗口設置時間限制。在我的jQuery彈出窗口中延長持續時間

HTML:

<div class='popbox'> 
<a class='open' href='#'> 
    <img src='plus.png' style='width:14px;position:relative;'> Click Here! 
</a> 

<div class='collapse'> 
    <div class='box'> 
    <div class='arrow'></div> 
    <div class='arrow-border'></div> 

    <form action="" method="post" id="subForm"> 
     <div class="input"> 
     <input type="text" name="cm-name" id="name" placeholder="Name" /> 
     </div> 
     <div class="input"> 
     <input type="text" name="cm-nklki-nklki" id="nklki-nklki" placeholder="Email" /> 
     </div> 
     <div class="input"> 
     <textarea name="cm-f-tlhll" id="Message" placeholder="Comments"></textarea> 
     </div> 
     <input type="submit" value="Get In Touch" /> <a href="#" class="close">Cancel</a> 
     <input type="button" name="closebutton" id="closebutton" value="closebutton" > 
    </form> 

    </div> 
</div> 

的Jquery:

(function() { 
    $.fn.popbox = function (options) { 
    var settings = $.extend({ 
     selector: this.selector, 
     open: '.open', 
     box: '.box', 
     arrow: '.arrow', 
     arrow_border: '.arrow-border', 
     close: '.close' 
    }, options); 
    var methods = { 
     open: function (event) { 
     event.preventDefault(); 
     var pop = $(this); 
     var box = $(this).parent().find(settings['box']); 
     if (box.css('display') == 'block') { 
      methods.delay(1500).close(); 
     } else { 
      box.css({ 
      'display': 'block', 
      'top': 10, 
      'left': ((pop.parent().width()/2) - box.width()/2) 
      }); 
     } 
     }, 
     close: function() { 
     $(settings['box']).fadeOut("fast"); 
     } 
    }; 
    $(document).bind('keyup', function (event) { 
     if (event.keyCode == 27) { 
     methods.delay(1500).close(); 
     } 
    }); 
    return this.each(function() { 
     //$(this).css({'width': $(settings['box']).width()}); // Width needs to be set otherwise popbox will not move when window resized. 
     $(settings['open'], this).bind('click', methods.open); 
     $(settings['open'], this).parent().find(settings['close']).bind('click', function (event) { 
     event.preventDefault(); 
     methods.close(); 
     }); 
    }); 
    } 
}).call(this); 

回答

0

增加delay(1500)爲更高的值。 1500以毫秒爲單位,這意味着您的當前彈出窗口將在1.5秒內關閉。

+0

當我關閉按鈕時超時工作,但它在表單提交失敗。當我點擊提交按鈕時,它立即關閉。但我需要增加關門時間。 – RaJeSh 2013-02-12 05:43:25

+0

替換 '$(settings ['box'])。fadeOut(「fast」);' 與 '$(settings ['box'])。fadeOut(1500);' – 2013-02-28 10:59:27

0
close: function() { 
    window.setTimeout(function() { 
     $(settings['box']).fadeOut("fast"); 
    }, 1000); // 1 second 
} 
+0

你可以得到我的問題 – RaJeSh 2013-02-12 05:45:20

+0

@Koenyn最好解釋你的解決方案,而不是隻發佈代碼。 – ryadavilli 2013-02-12 05:55:40

+0

好吧,基本上,你需要在他們點擊關閉後「延遲」這個動作嗎?所以相反,我在關閉函數中添加了一個超時。這隻會在點擊關閉後的1秒內觸發淡出。 http://www.w3schools.com/jsref/met_win_settimeout.asp – Koenyn 2013-02-12 10:14:08