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的加载方法并注入.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页面内。 E.g：

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

最后，您的LAB6.html将只包含.modal-content内的代码。 E.g：

<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中。如果您使用的是数据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.

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

2 个答案:

的更新