从另一页获取Bootstrap的模态内容 [英] Getting Bootstrap's modal content from another page

查看：73
本文介绍了从另一页获取Bootstrap的模态内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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



menu.html 

 < div class =collapse navbar-collapse navbar-exl-collapse> 
< ul class =nav navbar-navid =menu> 
< li>< a href =/ emplookup.html>查找< / a>< / li> 
< li>< a href =/ modalexample.html> Modals< / a>< / li> 
 lt< a href =/ Lab6.html＃theModaldata-toggle =modal>实验6< / a>< / li>< > 
< / ul> 
< / div>

Lab6.html 

 < div class =modal fade text-centerid =theModal> 
< div class =modal-dialog> 
< div class =modal-content> 
< div class =modal-header>

我做错了什么？

解决方案

更新



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

根据 Bootstrap的文档：


如果提供远程URL，内容将通过
一次加载jQuery的加载方法，并注入到 .modal-content div。如果
使用的是data-api，则可以使用href
属性指定远程源。例如：

< a data-toggle =modalhref =remote .htmldata-target =＃modal>点击我< / a>


所以，首先，您应该更改 menu.html 文件与以上代码类似： 

 < li>< data-target =＃theModaldata-toggle =modal> Lab 6< / a>< / li> a href =Lab6.html

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

 < div class =modal fade text-centerid =theModal> 
< div class =modal-dialog> 
< div class =modal-content> 
< / div> 
< / div> 
< / div>

最后，您的 LAB6.html 只有位于 .modal-content 内的代码。例如：

 < div class =modal-header>

请看我为你创建的plnkr 。


I have an anchor in a page called menu.html and I'm having trouble getting a Bootstrap modal to display data from another page called 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>

Am I doing anything wrong?

解决方案

Update

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

According to Bootstrap's documentation:

If a remote URL is provided, content will be loaded one time via jQuery's load method and injected into the .modal-content div. 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>

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

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

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

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

Finally, your LAB6.html would have only the code that was inside .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>

Take a look at the plnkr I created for you.

这篇关于从另一页获取Bootstrap的模态内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆