我在名为 menu.html
的页面中有一个 anchor ,但我在获取 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>
我做错了什么吗?
最佳答案
更新
您尝试从另一个页面获取模态内容的方式不正确。
根据 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>
因此,首先,您应该将 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>
关于javascript - 从另一个页面获取 Bootstrap 的模态内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32958219/