javascript – 不活动后的JQuery Close Modal

2023年4月15日 359次阅读

我正在创建一个触摸屏反馈信息亭,在用户选择反馈选项(好/坏)后提示用户输入他们的电子邮件地址.

留下他们的电子邮件地址是可选的,因此模态窗口应在x秒不活动后关闭.

如何检测用户当前是否在模态中“活动”并关闭它(如果不是)(使用JQuery)？

倒数计时器应重置,并且模态保持打开,如果：

>用户开始输入输入.

如果以下情况应该关闭模态;

>输入已处于非活动状态x秒(用户离开).

我有一半是完整的,只需要对其余的一些帮助.目前,计时器仅在每次输入点击时更改.

我目前的代码如下;

Here’s a link到我的小提琴.

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的

$(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);
  });
});

任何帮助表示赞赏.

最佳答案 尝试使用以下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>
点赞