在 Bootstrap 中，如何使用模态重定向到一个部分（而不重定向到打开模态的位置）

Posted 2023-05-08

【中文标题】在 Bootstrap 中，如何使用模态重定向到一个部分（而不重定向到打开模态的位置）

【英文标题】：In Bootstrap how do I redirect to a section using a modal (without getting redirected to where the modal was opened)

【发布时间】：2021-03-08 13:39:06

【问题描述】：

我正在构建一个简单的前端站点，并且正在使用 Bootstrap 进行样式设置。 我已经使用模态构建了一个部分。用户点击一个按钮打开模态，然后看到一个居中的模态。

我想要什么

我希望能够允许用户单击模态底部的按钮并被重定向到页面的另一部分并关闭模态。

通过使用<a> 标签、href 和 id 以及使用onclick="window.location.href='#middle'"，我已经成功地将用户移动到页面的新部分，并且还能够关闭模式。

问题是当用户点击模态框上的按钮时，他们被重定向到我希望他们去的地方并且模态框关闭 BUT 然后立即窗口移回模态按钮按下的原始位置。

我想停止移动回到单击原始模式的位置，并将用户留在他们单击按钮时到达的位置。

我试过用<a>标签代替<button>，效果一样。

这是一个显示问题的工作示例 jsfiddle。

https://jsfiddle.net/peamanschesthair/kdu5gno1/42/

非常感谢任何想法。

【问题讨论】：

也许 scrollTop 是你要找的。查看本页底部的解决方案***.com/questions/39614103/…

谢谢。为什么我找不到那个线程？！我已经看了一整天了！

【参考方案1】：

在模态hide 事件之后，使用 setTimeout 延迟位置更改。要确定触发关闭的元素，请检查 document.activeElement...

$('#exampleModalCenter').on('hide.bs.modal', function (e) 
    var closeTrigger = document.activeElement.id
    if (closeTrigger === 'btnMove') 
        setTimeout(()=>
          window.location.hash = '#middle'
        ,400)
    
)

演示： https://codeply.com/p/WW9aB8OeNx

备用选项：如果已单击 btnMove，则在模式隐藏事件中设置数据标志，然后链接隐藏事件并检查数据标志...

$('#exampleModalCenter').on('hide.bs.modal', function (e) 
    var closeTrigger = document.activeElement.id
    if (closeTrigger === 'btnMove') 
        this.data = 'move'
    
).on('hidden.bs.modal', function (e) 
    if (this.data === 'move') 
        setTimeout(()=>
          window.location.hash = '#middle'
        ,400)
    
)

【讨论】：

谢谢。唯一的问题是，即使用户关闭了模态框或单击了 x，它也会继续更改位置。

谢谢 Zim，我喜欢你的想法。我不明白的是在实现它时，为什么它不可重复？您可以移动用户一次，但我似乎无法使用此解决方案再次执行此操作。我错过了什么吗？谢谢