更新

您尝试从另一个页面获取模态内容的方式不正确。

根据Bootstrap 的文档：

如果提供了远程 URL，内容将通过 jQuery 的 load 方法加载一次并注入到.modal-contentdiv 中。如果您使用的是 data-api，您也可以使用 href 属性来指定远程源。一个例子如下所示：

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

因此，首先，您应该将menu.html文件更改为类似于上面的代码：

<li><a href="Lab6.html" data-target="#theModal" data-toggle="modal">Lab 6</a></li>

然后，您的Lab6.html页面的一部分必须位于您的menu.html页面内。例如：

<div class="modal fade text-center" id="theModal">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>

最后，你LAB6.html将只有里面的代码.modal-content。例如：

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal">X</button>
  <h1>Lab 6</h1>
</div>
<div class="modal-body">
  <div class="panel panel-default">
    <div class="panel-heading text-center">
      Employee Information
    </div>
    <div class="panel-body">
      <div class="row">
        <div class="text-right col-xs-2">Title:</div>
        <div class="text-left col-xs-3" id="title"></div>
        <div class="text-right col-xs-2">First:</div>
        <div class="text-left col-xs-3" id="firstname"></div>
      </div>
      <div class="row">
        <div class="text-right col-xs-2">Phone#</div>
        <div class="text-left col-xs-3" id="phone"></div>
        <div class="text-right col-xs-2">Email</div>
        <div class="text-left col-xs-3" id="email"></div>
      </div>
      <div class="row">
        <div class="text-right col-xs-2">Dept:</div>
        <div class="text-left col-xs-3" id="departmentname"></div>
        <div class="text-left col-xs-2">Surname:</div>
        <div class="text-left col-xs-4">
          <input type="text" placeholder="enter last name" id="TextBoxLastName" class="form-control" />
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <div class="panel-footer">
      <input type="button" value="Find Employee" id="empbutton" />
      <div class="col-xs-10" id="lblstatus"></div>
    </div>
  </div>
</div>

看看我为你创建的 plnkr。

请注意，如果您使用的是 Bootstrap 4，则接受的答案不起作用，因为根据Bootstrap 的 关于该remote选项的文档：

此选项自 v3.3.0 起已弃用，并已在 v4 中删除。我们建议改为使用客户端模板或数据绑定框架，或者自己调用 jQuery.load。

如果提供了远程 URL，内容将通过 jQuery 的load方法加载一次并注入.modal-contentdiv。如果您使用的是 data-api，您也可以使用该href属性来指定远程源。一个例子如下所示：

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

要使其工作，首先从链接中删除data-target和data-toggle属性。您可以将href属性留在那里。

<li><a href="Lab6.html" class='li-modal'>Lab 6</a></li>

使用 jQuery 我们可以给<a>元素添加一个点击监听器，但是我们不想直接转到href属性所指示的页面，所以我们使用preventDefault(). 通过简单地使用 jQuery 的load方法，我们可以将lab6.html页面内容加载到modal-content.

$('.li-modal').on('click', function(e){
      e.preventDefault();
      $('#theModal').modal('show').find('.modal-content').load($(this).attr('href'));
    });

完整的例子在这里。