如果任何用户在我的网站停留超过 20 秒，弹出的联系表格应该要求填写详细信息

Question

如果任何用户在我的网站上停留超过 20 秒，联系表格应该出现并弹出应该要求填写详细信息，我希望这个表格应该在右侧栏（如垂直位置）。所以我再次告诉如果任何用户只是在网站上等待 20 秒，这个弹出窗口应该会出现。现在我面临切换功能的问题，也没有向我显示，而且我想实现 30 秒代码，任何人都可以指导我，表单应该是响应式的。这是link请检查

http://lotusvalue.in/popup.html

$(document).ready(function() {
  $("button").click(function() {
    alert('ok1');
    $(".pop−content").toggle(1000);
  });
});

.pop-content {
  height: auto;
  width: 200px;
  background: #000;
  color: #fff;
  position: fixed;
  bottom: 60px;
  right: 20px;
  display: none;
}

button {
  width: 200px;
  height: auto;
  padding: 10px;
  background: green;
  font-weight: bold;
  color: #eee;
  text-align: center;
  border: 0;
  position: fixed;
  bottom: 300px;
  right: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="pop-content">
  <form>
    <label for="name">Name:</label><br>
    <input type="text" name="name"><br>
    <label for="email">Email:</label><br>
    <input type="email" name="email"><br>
    <input type="submit" name="submit" value="Submit">
  </form>
</div>
<button>Enquiry form</button>

Answer 1

要在页面打开 30 秒后显示您的表单，您可以这样做：

$(document).ready(function(){
  setTimeout(function(){
    $(".pop−content").toggle(1000);
  }, 30000);
});

Answer 2

你可以这样做....

$(document).ready(function() {
  $('button').click(function(){
    $('.pop-content').slideToggle();
  });
  setTimeout(function(){
    $('.pop-content').slideToggle();
  },30000);/*30 seconds delay*/
});

.pop-content {
  height: auto;
  width: 200px;
  background: #000;
  color: #fff;
  position: fixed;
  bottom: 60px;
  right: 20px;
  display: none;
}

button {
  width: 200px;
  height: auto;
  padding: 10px;
  background: green;
  font-weight: bold;
  color: #eee;
  text-align: center;
  border: 0;
  position: fixed;
  bottom: 300px;
  right: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="pop-content">
  <form>
    <label for="name">Name:</label><br>
    <input type="text" name="name"><br>
    <label for="email">Email:</label><br>
    <input type="email" name="email"><br>
    <input type="submit" name="submit" value="Submit">
  </form>
</div>
<button>Enquiry form</button>

Answer 3

从 .pop-content class 中删除 display: none;，然后尝试使用以下代码

$(document).ready(function(){
    $(".pop-content").toggle();
      $("button").click(function(){
          $(".pop-content").toggle(1000);
      });

      setTimeout(function() {
        $(".pop-content").toggle(1000);
      }, 30000);

  });

如果任何用户在我的网站停留超过 20 秒，弹出的联系表格应该要求填写详细信息

If any user sticks more than 20 second in my website ,Contact form pop up should ask to fill the details

css

forms

jquery

sidebar