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

Getting Bootstrap's modal content from another page

提问by Corivo

I have an anchor in a page called menu.htmland I'm having trouble getting a Bootstrap modal to display data from another page called Lab6.html.

我在menu.html名为Lab6.html.

menu.html

菜单.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

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>

Am I doing anything wrong?

我做错了什么吗？

回答by Buzinas

Update

更新

The way you're trying to get modal's content from another page is incorrect.

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

According to Bootstrap's documentation:

根据Bootstrap 的文档：

If a remote URL is provided, content will be loaded one time via jQuery's load method and injected into the .modal-contentdiv. If you're using the data-api, you may alternatively use the href attribute to specify the remote source. An example of this is shown below:

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

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

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

So, firstly, you should change your menu.htmlfile to be similar to the code above:

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

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

And then, part of your Lab6.htmlpage must reside inside your menu.htmlpage. E.g:

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

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

Finally, your LAB6.htmlwould have only the code that was inside .modal-content. E.g:

最后，您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>

Take a look at the plnkr I created for you.

看看我为你创建的 plnkr。

回答by Csaba

Note that if you are using Bootstrap 4, the accepted answer does not work, because according to Bootstrap's docsabout the remoteoption:

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

This option is deprecated since v3.3.0 and has been removed in v4.We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.

If a remote URL is provided, content will be loaded one time via jQuery's loadmethod and injected into the .modal-contentdiv. If you're using the data-api, you may alternatively use the hrefattribute to specify the remote source. An example of this is shown below:

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

此选项自 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>

To make it work, first remove the data-targetand data-toggleattributes from the link. You can leave the hrefattribute there.

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

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

Using jQuery we can add a click listener to the <a>element, but we do not want to directly go to the page indicated by the hrefattribute so we use preventDefault(). By simply using jQuery's loadmethod we can load the content of the lab6.htmlpage into modal-content.

使用 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.

完整的例子在这里。