从另一个页面获取 Bootstrap 的模态内容

Question

我在名为 menu.html 的页面中有一个锚点，但我无法让 Bootstrap 模式显示来自另一个名为 Lab6.html 的页面的数据。

menu.html

<div class="collapse navbar-collapse navbar-exl-collapse">
  <ul class="nav navbar-nav" id="menu">
    <li><a href="/emplookup.html">Lookup</a></li>
    <li><a href="/modalexample.html">Modals</a></li>
    <li><a href="/Lab6.html#theModal" data-toggle="modal">Lab 6</a></li><!-- this one -->
  </ul>
</div>

Lab6.html

<div class="modal fade text-center" id="theModal">
  <div class="modal-dialog">
    <div class="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>
    </div>
  </div>
</div>
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>

我做错了什么吗？

Answer 1

更新

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

根据Bootstrap's documentation：

如果提供了远程 URL，内容将通过以下方式加载一次 jQuery 的 load 方法并注入到.modal-content div 中。如果 您正在使用 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>

看看the plnkr I created for you。

Answer 2

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

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

如果提供了远程 URL，内容将通过 jQuery 的 load 方法加载一次，并注入到 .modal-content div 中。如果您使用的是 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'));
    });

Full example here.