Question

我想这样做：单击按钮时，站点将转到指定的部分，然后打开引导模式。

我试图只是延迟打开一个模态，这样网站会下到指定的部分然后显示模态。我尝试过使用setTimeout函数，但问题是它无法正常工作。

$('[data-toggle=modal]').on('click', function (e) {
var $target = $($(this).data('target'));
$target.data('triggered',true);
setTimeout(function() {
    if ($target.data('triggered')) {
        $target.modal('show')
            .data('triggered',false); //
    };
}, 2000); // milliseconds
return false;
});

按钮看起来像这样：

<div type="button" data-toggle="modal" data-target="#succes-modal"><a href='#your-succes' rel="m_PageScroll2id"><div class='home_slider_btn'>READ MORE</div></a></div>

我使用了那个脚本，但是点击一个按钮后模态就会打开。我不知道为什么这个功能不能正常工作。

你有什么想法吗？提前谢谢！

Answer 1

默认情况下，所有data-toggle="modal"元素都绑定在bootstrap.js中，因此请将其替换为其他内容。例如data-toggle="modal-delay"

<a data-toggle="modal-delay" data-target="#succes-modal"></a>

HTML

$('[data-toggle=modal-delay]').on('click', function (e) {
      var $target = $($(this).data('target'));
      $target.data('triggered',true);
      setTimeout(function() {
            if ($target.data('triggered')) {
                 $target.modal('show')
                 .data('triggered',false); //
            };
      }, 2000); // milliseconds
      return false;
});

OR

使用event.stopPropagation()。

Answer 2

每个Twitter Bootstrap documentation，当点击带有data-toggle="modal"的元素时，会立即启动模态对话框。

如果您想要自定义行为，请从按钮中删除data-toggle属性并使用其他选择器。

延迟开启模式

2 个答案: