Question

这是我的问题。我正在研究一个简单的模态项目。从代码中可以看出，当用户点击演示链接或按钮时，它会调用模态屏幕。

然而，不是点击我想在一段时间后自动调用该模态屏幕，比如20秒之后。那么我可以在JavaScript代码中实际应用setTimeout吗？

HTML

<div id='content'>
<div id='basic-modal'>

<input type='button' name='basic' value='DEMO' class='basic'/> 
<a href='#' class='basic'>DEMO</a>

</div>

<!-- modal content -->
<div id="basic-modal-content">
<a href='asdasdasd'><img src="https:/asdasd.jpg" alt="asdasd"></a>

</div>
<div style='display:none'>

</div>
</div>
</div>

JS CODE：

jQuery(function ($) {
    // Load dialog on page load
    //$('#basic-modal-content').modal();

    // Load dialog on click
    $('#basic-modal .basic').click(function (e) {
        $('#basic-modal-content').modal();

        return false;
    });
});

Answer 1

这应该可以解决问题：

$(function(){ // Make sure jQuery is ready before delaying the modal function
    window.setTimeout(function(){
        $('#basic-modal-content').modal();
    }, (20 * 1000)); // Executes function in 20 seconds
});

Answer 2

您还希望点击活动正确吗？因此，您需要在20秒后或有人点击时打开它。无论哪种方式，您都必须取消超时。

这是JS代码。

var timeout;
var openModal = function() {
  $('#basic-modal-content').modal();
  clearTimeout(timeout);
};

var delay = 20000; //20 seconds
timeout = setTimeout(function() {
  openModal();
},dealy);

$('#basic-modal .basic').click(function(e) {
  openModal();
  return false;
});

Answer 3

也许试试这个？

$(document).ready(function() {
    $('#basic-modal-content').delay(20000).modal();
});

我可以使用setTimeout而不是单击处理程序吗？

3 个答案: