闲置后jQuery关闭模态
[英]JQuery Close Modal After Inactivity
问题描述
I am creating a touch screen feedback kiosk that prompts users for their email address after they select a feedback option (good / bad). 
我正在创建一个触摸屏反馈亭，该亭将在用户选择反馈选项（好/坏）后提示用户输入电子邮件地址。
Leaving their email address is optional, so the modal window should close after x seconds of inactivity. 保留其电子邮件地址是可选的，因此模式窗口应在x秒钟不活动后关闭。
How can I detect if a user is currently 'active' in the modal and close it if not (using JQuery)? 如何检测用户是否当前处于活动状态，如果不处于活动状态，则将其关闭（使用JQuery）？
The countdown timer should be reset, and modal stay open if: 在以下情况下，应重置倒数计时器，并且模式保持打开：
- The user begins to type in the input. 用户开始输入输入。
The modal should be closed if; 在以下情况下应关闭该模式：
- The input has been inactive for x seconds (user leaves). 输入已无效x秒钟（用户离开）。
I have half of it complete, just need some help with the rest of it. 我已经完成了一半，其余部分则需要一些帮助。 Currently the timer only changes on each click of the input. 当前，计时器仅在每次单击输入时才更改。
My current code is below; 我当前的代码如下；
Here's a link to a my fiddle. 这是我的小提琴的链接 。
HTML 的HTML
<button type="button" class="btn btn-primary" id="feedbackFormBad">click</button>
<div aria-hidden="true" class="modal fade" id="memberNumberModal" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header modal-header-primary">
<h1>Hello</h1>
</div>
<div align="center" class="modal-body">
<p>Some text here.</p>
<p span id="countdown"></p>
<!-- show count down timer here -->
<form id="memberNumberForm" class="form-inline">
<div class="form-group mb-2">
<input type="text" name="Email" class="form-control" id="memberNumber" placeholder="enter email" required>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Send</button>
<button type="button" class="btn btn-secondary" id="closeModal" data-dismiss="modal">No Thanks</button>
</div>
</form>
</div>
</div>
</div>
</div>
JQuery jQuery查询
$(document).ready(function() {
$("#feedbackFormBad").on("touchstart, click", function(e) {
$('#memberNumberModal').modal('toggle');
var counter = 5;
var interval = setInterval(function() {
counter--;
$("#memberNumber").focus(function() {
$("#countdown").html('Window will close in ' + counter + ' seconds.');
});
if (counter == 0) {
$('#memberNumberModal').modal('hide');
clearInterval(interval);
}
}, 1000);
});
});
Any help is appreciated. 任何帮助表示赞赏。
2 个解决方案
解决方案1
1 2018-04-24 10:22:31
Try with the below javascript code 尝试以下javascript代码
$(document).ready(function() { $("#feedbackFormBad").on("touchstart, click", function(e) { $('#memberNumberModal').modal('toggle'); var counter = 5; var interval = setInterval(function() { counter--; $("#countdown").html('Window will close in ' + counter + ' seconds.'); if (counter == 0) { $('#memberNumberModal').modal('hide'); clearInterval(interval); } }, 1000); $('body').bind('mousedown keydown', function(event) { counter = 5; }); }); });
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <body> <button type="button" class="btn btn-primary" id="feedbackFormBad">click</button> <hr> <p>The timer should be reset if:</p> <ul> <li>The user begins to type in the input.</li> </ul> <p>The modal should be closed if:</p> <ul> <li>The input has been inactive for x seconds (user leaves).</li> </ul> <div aria-hidden="true" class="modal fade" id="memberNumberModal" role="dialog" tabindex="-1"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header modal-header-primary"> <h1>Hello</h1> </div> <div align="center" class="modal-body"> <p>Some text here.</p> <p span id="countdown"></p> <!-- show count down timer here --> <form id="memberNumberForm" class="form-inline"> <div class="form-group mb-2"> <input type="text" name="Email" class="form-control" id="memberNumber" placeholder="enter email" required> </div> <div class="modal-footer"> <button type="submit" class="btn btn-primary">Send</button> <button type="button" class="btn btn-secondary" id="closeModal" data-dismiss="modal">No Thanks</button> </div> </form> </div> </div> </div> </div> </body>
解决方案2
0 2018-04-24 09:58:09
You could use a combination of setInterval and all of the events to achieve this. 您可以结合使用setInterval和all of the events来实现此目的。 I've commented the code below. 我评论了下面的代码。
Update 更新资料
Originally, I'd posted an answer using the keyup function - missing the touchscreen part of the requirements. 最初，我使用keyup功能发布了答案-缺少需求的触摸屏部分。 However, the below listens for any change to the text input. 但是，以下内容监听文本输入的任何更改。 Let me know if this works. 让我知道这个是否奏效。
The events were taken from this answer here Best way to track onchange as-you-type in input type="text"? 事件是从此处的答案中获取的。 跟踪输入类型=“文本”中的键入时onchange的最佳方法？
// Keep track of if user is active var active = true; // keep track of how long since the user has typed var timeElapsed = 0; // check every second setInterval(function(){ timeElapsed += 1; // example $("#timer").html(timeElapsed + " seconds inactive"); // a minute has passed since the user has typed if(timeElapsed == 60){ // close modal $('#memberNumberModal').modal('hide'); } }, 1000); // if the user types, reset the timer $("#test").on('change keydown paste input propertychange click keyup blur', function(){ // user is active, has typed timeElapsed = 0; });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input id="test" type="text"> <span id="timer"></span>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.