在我的jQuery弹出窗口中延长持续时间
我有一个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);
增加delay(1500)
为更高的值。 1500以毫秒为单位,这意味着您的当前弹出窗口将在1.5秒内关闭。
close: function() {
window.setTimeout(function() {
$(settings['box']).fadeOut("fast");
}, 1000); // 1 second
}
你可以得到我的问题 – RaJeSh 2013-02-12 05:45:20
@Koenyn最好解释你的解决方案,而不是只发布代码。 – ryadavilli 2013-02-12 05:55:40
好吧,基本上,你需要在他们点击关闭后“延迟”这个动作吗?所以相反,我在关闭函数中添加了一个超时。这只会在点击关闭后的1秒内触发淡出。 http://www.w3schools.com/jsref/met_win_settimeout.asp – Koenyn 2013-02-12 10:14:08
当我关闭按钮时超时工作,但它在表单提交失败。当我点击提交按钮时,它立即关闭。但我需要增加关门时间。 – RaJeSh 2013-02-12 05:43:25
替换 '$(settings ['box'])。fadeOut(“fast”);' 与 '$(settings ['box'])。fadeOut(1500);' – 2013-02-28 10:59:27