从另一个页面获取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的文档:

如果提供了远程URL,则将通过jQuery的加载方法一次加载内容并将其注入.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.

Answer 2

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

从v3.3.0开始不推荐使用此选项，并且在v4中已将其删除。我们建议改为使用客户端模板或数据绑定框架，或者自己调用jQuery.load。

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

完整示例在这里。