如何为Bootstrap模态框触发块添加右键新窗口打开链接？

嗨，我来帮你搞定这个需求！你现在的问题是左键点击区块弹模态框，同时想让右键能选择“在新窗口打开”对应文章页面对吧？其实核心思路就是给区块里的内容套一个标准的<a>标签，同时阻止它的左键默认跳转行为，让模态框逻辑继续生效。

具体实现步骤 #

1. 修改HTML结构 #

把你的图片（以及区块内的其他内容）包裹在一个<a>标签里，href设为文章的实际页面地址（注意不是你那个ajax接口的地址，ajax是用来加载模态框内容的，实际页面应该是独立的文章页，比如showitem.php?id=67）：

<div data-ajaxurl="showitemajax.php?id=67" data-target="#exampleModal" data-toggle="modal" class="articlebl col-lg-2 col-md-3 col-sm-4 col-xs-6">
  <!-- 新增的a标签，href替换成你的文章页面URL -->
  <a href="showitem.php?id=67" class="article-link d-block w-100">
    <img class="img-fluid w-100" alt="Test Article" src="image.jpg">
    <!-- 如果有文章标题、摘要等其他内容，也放在这个a标签里 -->
  </a>
</div>

这里给a标签加了d-block w-100是为了让它占满整个区块，这样右键点击区块任何位置都能触发链接的右键菜单。

2. 添加JavaScript阻止左键跳转 #

因为我们要保留左键点击弹模态框的逻辑，所以需要阻止a标签的默认跳转行为，转而触发父div的模态框事件。如果你用jQuery（Bootstrap通常依赖它），可以加这段代码：

$(document).on('click', '.article-link', function(e) {
  // 阻止a标签默认的页面跳转
  e.preventDefault();
  // 触发父div的点击事件，让Bootstrap模态框正常弹出
  $(this).closest('.articlebl').trigger('click');
});

如果不想用jQuery，原生JS版本也可以：

document.addEventListener('click', function(e) {
  const link = e.target.closest('.article-link');
  if (link) {
    e.preventDefault();
    link.closest('.articlebl').click();
  }
});

为什么这样做？ #

• 套上<a>标签后，浏览器会自动识别这是一个可跳转的链接，右键点击时就会显示“在新窗口打开”“在新标签页打开”这些原生选项，完全符合用户的操作习惯。
• 左键点击时，我们通过JS阻止了跳转，转而触发原来div的模态框逻辑，所以原来的功能完全不受影响。

注意事项 #

• 一定要把href替换成你实际的文章页面URL，而不是showitemajax.php（这个是ajax接口，用来给模态框加载内容的，不是独立页面）。
• 确保你的页面已经正确引入了Bootstrap的JS和CSS，以及jQuery（如果用jQuery版本的代码）。
• 测试一下：左键点击区块，模态框正常弹出；右键点击区块，选择“在新窗口打开”，能跳转到对应的文章页面就大功告成啦！

内容的提问来源于stack exchange，提问作者workoverflow