我帮你梳理下代码里的问题，以及对应的修复方案——你现在遇到的空白模态框问题，主要是DOM选择器、事件绑定和默认行为处理这几个地方出了问题：

核心问题分析 #

• 重复ID导致事件绑定失效：你给所有PDF链接都用了id="ai_dropdown"，但ID在HTML里必须是唯一的。jQuery的$("#ai_dropdown")只会选中第一个匹配的元素，后面的链接点击根本不会触发你的JS逻辑。
• 错误的内容获取方式：$('a:selected', this)这个选择器完全不对，<a>标签没有selected状态，你应该直接获取当前点击的<a>元素的href值。
• 未阻止默认跳转行为：点击<a>标签会触发默认的页面跳转（哪怕href指向PDF），这会干扰模态框的iframe加载逻辑，导致src没来得及设置就触发了跳转。

修复后的代码 #

第一步：修正HTML（替换重复ID为class） #

把所有PDF链接的id="ai_dropdown"改成class="ai_dropdown"，同时规范模态框的宽度写法：

<li> 
  <a href="">Case Studies</a> 
  <ul class="rd-navbar-dropdown"> 
    <li class="rd-navbar-aside-right"> 
      <a class="ai_dropdown" data-toggle="modal" data-target="#myModal" href="white-papers/transformation_of_the_cookie/1.pdf#toolbar=0">Case Study 1</a><br> 
      <a class="ai_dropdown" data-toggle="modal" data-target="#myModal" href="white-papers/transformation_of_the_cookie/2.pdf#toolbar=0">Case Study 2</a><br> 
      <a class="ai_dropdown" data-toggle="modal" data-target="#myModal" href="white-papers/transformation_of_the_cookie/3.pdf#toolbar=0">Case Study 3</a><br> 
    </li> 
  </ul> 
</li> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  <div class="modal-dialog" style="width:700px"> <!-- 用style属性设置宽度，符合HTML标准 -->
    <div class="modal-content"> 
      <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      </div> 
      <div class="modal-body"> 
        <iframe id="iframe" src="" width="100%" height="600px" frameborder="0" allowtransparency="true"></iframe> 
      </div> 
    </div> 
  </div> 
</div>

第二步：修正JavaScript逻辑 #

修改事件绑定和内容获取方式，同时阻止默认跳转行为：

$(document).ready(function() {
  // 绑定class选择器，选中所有PDF链接
  $(".ai_dropdown").on('click', function(e) {
    // 阻止<a>标签的默认跳转行为
    e.preventDefault();
    // 获取当前点击元素的href属性值
    var pdfUrl = $(this).attr('href');
    console.log(pdfUrl);
    // 设置iframe的src
    $('#iframe').attr('src', pdfUrl);
  });
});

额外排查点（如果修复后仍无法加载） #

• 确认PDF文件路径是否正确：直接在浏览器地址栏输入PDF的完整路径，测试文件是否存在、是否能正常访问。
• 检查浏览器PDF预览支持：部分老旧浏览器可能需要插件支持，现代浏览器一般都能直接在iframe中预览PDF。
• 优化模态框加载时机：可以在模态框完全显示后再设置iframe的src，避免加载时机问题：

  $('#myModal').on('shown.bs.modal', function() {
    var activeUrl = $(".ai_dropdown:focus").attr('href');
    if(activeUrl) $('#iframe').attr('src', activeUrl);
  });
  

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