我在nHibernate驱动的MVC环境中。我的视图调用了几个嵌套的HTML内容选项卡，在这些选项卡中，我根据显示的网格中的点击项目设置了模态弹出窗口。
我想在该模式中的字段上使用Bootstrap popover工具提示，但我似乎无法让它们工作。
主要观点是：
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Bootstrap.Base.Master" Inherits="System.Web.Mvc.ViewPage<CTICNWv4.Framework.AppContext.ICurrentApplicationContext>" %>
<asp:Content ContentPlaceHolderID="TitleContent" ID="tc" runat="server">
Chicago Title School of Real Estate Management
</asp:Content>
<asp:Content ContentPlaceHolderID="PageContent" ID="pc" runat="server">
<div class="row-fluid">
<div class="span12" style="text-align: right;"><a href="/Employee/#!Schools">< Back to Employee Dashboard</a></div>
</div>
<div class="row-fluid" id="divWOW">
<div class="span12">
<h1>School Management</h1>
<div id="ng-app" ng-app="schoolManager" class="tabbable tabs-left">
<ul ng-controller="NavCtrl" class="nav nav-tabs">
<li ng-class="{ active: isActive('/scheduling/active') }"><a href="#/scheduling/active">Scheduling</a></li>
<li ng-class="{ active: isActive('/classes') }"><a href="#/classes">Classes</a></li>
<li ng-class="{ active: isActive('/venues') }"><a href="#/venues">Venues</a></li>
<li ng-class="{ active: isActive('/instructors') }"><a href="#/instructors">Instructors</a></li>
<li ng-class="{ active: isActive('/closed-classes') }"><a href="#/closed-classes">Closed Classes</a></li>
<li ng-class="{ active: isActive('/scheduling/canceled') }"><a href="#/scheduling/canceled">Canceled Classes</a></li>
</ul>
<div ng-view growl class="tab-content"></div>
</div>
</div>
</div>
</asp:Content>
<asp:Content ContentPlaceHolderID="AdditionalScripts" ID="as" runat="server">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular-resource.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap-addons/ui-bootstrap-tpls-0.6.0.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap-addons/jquery.bootstrap-growl.min.js"></script>
<script type="text/javascript" src="/scripts/underscore-min.js"></script>
<script type="text/javascript" src="/scripts/ng-v4/ng-v4.js"></script>
<script type="text/javascript" src="/scripts/schoolmanager/app.js"></script>
<script type="text/javascript" src="/scripts/schoolmanager/controllers.js"></script>
<script type="text/javascript" src="/scripts/schoolmanager/services.js"></script>
<script type="text/javascript">
window.tenant = '<%= V4AppCtx.Current.TenantInfo.Operation %>';
</script>
</asp:Content>
<asp:Content ContentPlaceHolderID="AdditionalContent" ID="ac" runat="server">
<style type="text/css">
.nav, .pagination, .carousel a {
cursor: pointer;
}
</style>
</asp:Content>
HTML子标签代码页是：
<div ng-hide="resourcesLoaded >= 4" class="alert alert-warning">
<h4>Loading...</h4>
<div class="progress progress-striped active">
<div class="bar" style="width: 1000%;">
</div>
</div>
</div>
<div ng-show="resourcesLoaded >= 4">
<div class="row-fluid">
<div class="span6">
<button class="btn" ng-click="newClass()" ng-disabled="!options.createNew"><i class="icon-plus"></i>New Class</button>
</div>
<div class="span6">
<input type="text" class="pull-right" placeholder="Search" ng-model="filter" />
</div>
</div>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Course Date</th>
<th>Name</th>
<th>Venue City</th>
<th>Clock Hrs.</th>
</tr>
</thead>
<tbody highlight highlight-selector="tr#i_{{identifier}}>td">
<tr ng-repeat="item in classes | filter:filter | orderBy:courseSort:true | startAt:(currentPage-1)*pageSize | limitTo:pageSize"
ng-click="editClass(item)" class="clickable" id="i_{{item.ScheduleId}}">
<td>{{item.Class.CourseDate}}</td>
<td>({{item.Class.CourseNum}}) {{item.Class.ClassName}}</td>
<td>{{item.Class.VenueCity}}</td>
<td>{{item.Class.ClockHrs}}</td>
</tr>
</tbody>
</table>
<div class="pull-right">
<pagination total-items="classes.length" page="currentPage" items-per-page="pageSize"></pagination>
</div>
</div>
<script type="text/ng-template" id="class-form.html">
<form name="form" novalidate ng-submit="ok('save')">
<div class="modal-header">
<h3 ng-hide="!item.ScheduleId || closeout.show">Edit Class</h3>
<h3 ng-hide="!closeout.show">Closeout</h3>
<h3 ng-hide="item.ScheduleId">New Class</h3>
</div>
<div class="modal-body" ng-hide="closeout.show">
<div class="row-fluid">
<div class="span12">
<div class="control-group" ng-class="{error:form.course.$invalid && form.course.$dirty}">
<label for="course">Course *</label>
<select id="course" name="course" ng-model="item.Class.ClassId" class="input-block-level" ng-options="c.ClassId as ('(' + c.CourseNum + ') ' + c.ClassName) for c in courses | filter:{Active:true}" required
title="Select a Course from the list. This field is required."
data-content="Select a Course from the list. This field is required."
rel="popover"
data-placement="right"
data-original-title="Course"></select>
<span ng-show="form.course.$dirty">
<span ng-show="form.course.$error.required" class="help-inline">Please choose a course</span>
</span>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="control-group" ng-class="{error:form.venue.$invalid && form.venue.$dirty}">
<label for="venue">Venue *</label>
<select id="venue" name="venue" ng-model="item.Class.VenueId" class="input-block-level" ng-options="v.VenueId as (v.Name + ' (' + v.City + ')') for v in venues | filter:{Active:true}" required
title="Select a Venue from the list. This field is required."
data-content="Select a Venue from the list. This field is required."
rel="popover"
data-placement="right"
data-original-title="Venue"></select>
<span ng-show="form.venue.$dirty">
<span ng-show="form.venue.$error.required" class="help-inline">Please choose a venue</span>
</span>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span3">
<div class="control-group" ng-class="{error:form.date.$invalid && form.date.$dirty}">
<label for="date">Date *</label>
<div class="input-prepend input-block-level">
<span class="add-on"><i class="icon-calendar"></i></span>
<input id="date" name="date" type="text" ng-model="item.Class.CourseDate" required ng-pattern="/^[0-9]{1,2}[/-][0-9]{1,2}[/-][0-9]{2,4}$/"
placeholder="MM/DD/YYYY"
title="Please enter the class date, formatted as Month(2 Digit)/Day(2 Digit)/Year(4 Digit). This field is required."
data-content="Please enter the class date, formatted as Month(2 Digit)/Day(2 Digit)/Year(4 Digit). This field is required.
Example: 12/21/2014"
rel="popover"
data-placement="right"
data-original-title="Date">
</div>
<span ng-show="form.date.$dirty">
<span ng-show="form.date.$error.required" class="help-inline">Date is required</span>
<span ng-show="form.date.$error.pattern" class="help-inline">Invalid date</span>
</span>
</div>
</div>
<div class="span3">
<div class="control-group" ng-class="{error:form.time.$invalid && form.time.$dirty}">
<label for="time">Time *</label>
<div class="input-prepend input-block-level">
<span class="add-on"><i class="icon-time"></i></span>
<input id="time" name="time" type="text" ng-model="item.Class.StartTime" required ng-pattern="/^[0-9]{1,2}:[0-9]{1,2}[ ]*[AaPp][Mm]$/"
placeholder="HH:MM AM/PM"
title="Please enter the class time, formatted as Hours:Minutes AM or PM. This field is required, and the 'AM' or 'PM' is required."
data-content="Please enter the class time, formatted as Hours:Minutes AM or PM. This field is required, and the 'AM' or 'PM' is required.
Example: 08:15 AM
Example: 03:42 PM"
rel="popover"
data-placement="right"
data-original-title="Time">
</div>
<span ng-show="form.time.$dirty">
<span ng-show="form.time.$error.required" class="help-inline">Time is required</span>
<span ng-show="form.time.$error.pattern" class="help-inline">Invalid time</span>
</span>
</div>
</div>
<div class="span3">
<div class="control-group" ng-class="{error:form.cost.$invalid && form.cost.$dirty}">
<label for="cost">Cost</label>
<div class="input-prepend input-block-level">
<span class="add-on">$</span>
<input id="cost" name="cost" type="text" ng-model="item.Class.Cost" ng-pattern="/^[0-9]*[.]*[0-9]*$/"
placeholder="#,###.##"
title="Please enter the cost of the class. The cost should be entered as a monetary amount. This field is not required."
data-content="Please enter the cost of the class. The cost should be entered as a monetary amount. This field is not required."
rel="popover"
data-placement="right"
data-original-title="Cost">
</div>
<span ng-show="form.cost.$dirty">
<span ng-show="form.cost.$error.required" class="help-inline">Cost is required</span>
<span ng-show="form.cost.$error.pattern" class="help-inline">Invalid amount</span>
</span>
</div>
</div>
<div class="span3">
<label> </label>
<label for="private" class="checkbox">
<input type="checkbox" name="private" ng-model="item.Class.Private" /> Private
</label>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="control-group" ng-class="{error:form.comment.$invalid && form.comment.$dirty}">
<label for="comment">Compliance Comment</label>
<textarea id="comment" name="comment" type="text" ng-model="item.Class.ComplianceComment" class="input-block-level" rows="3" maxlength="128"
placeholder="Enter Compliance content here."
title="Please use this area to enter any Compliance notes for this class. This field is not required."
data-content="Please use this area to enter any Compliance notes for this class. This field is not required."
rel="popover"
data-placement="right"
data-original-title="Compliance Comment"></textarea>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<label>Instructors</label>
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>Instructor</th>
<th>Primary?</th>
<th>Show Contact Info?</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="inst in item.Instructors">
<td>{{inst.FirstName}} {{inst.LastName}}</td>
<td><input type="checkbox" ng-model="inst.Primary"></td>
<td><input type="checkbox" ng-model="inst.ShowContactInfo"></td>
<td class="centered"><a class="btn btn-danger btn-mini" ng-click="removeInstructor(inst)"><i class="icon-remove"></i> Remove</a></td>
</tr>
<tr>
<td><select id="instructor" name="instructor" class="input-block-level" ng-model="newInstructor.InstructorId" ng-options="inst.InstructorId as inst.FullName for inst in instructors | filter:{Active:true}"
title="Please select an Instructor from the list. This field is not required."
data-content="Please select an Instructor from the list. This field is not required."
rel="popover"
data-placement="right"
data-original-title="Compliance Comment"></select></td>
<td><input type="checkbox" ng-model="newInstructor.Primary"></td>
<td><input type="checkbox" ng-model="newInstructor.ShowContactInfo"></td>
<td class="centered"><a class="btn btn-primary btn-mini" ng-click="addInstructor()"><i class="icon-plus"></i> Add</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer" ng-hide="closeout.show">
<span ng-hide="!item.ScheduleId" class="pull-left">
<span ng-show="options.cancel"><confirm-button text="Cancel Class" body="Are you sure you want to cancel this class? An email will be sent to the RSVP'd students." action="ok('cancel-class')"></confirm-button></span>
<button class="btn" disabled="true" ng-show="!options.cancel">Cancel Class</button>
<button class="btn" ng-click="showCloseOut()" ng-disabled="!options.closeOut" type="button">Closeout</button>
</span>
<span ng-show="form.$invalid">
* Please enter all required information before saving.
</span>
<button class="btn btn-primary" ng-disabled="form.$invalid" type="submit">Save</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
<div class="modal-body" ng-hide="!closeout.show">
<div ng-show="!closeout.closingOut && !closeout.closedOut">
<p>
Please verify (and update as needed) the payment and completion status for the following students.
This list only shows students who have not cancelled their RSVPs and signed-in on the day of class.
</p>
<div ng-show="!closeout.rsvps" class="alert alert-info">
Loading students...
</div>
<div ng-show="closeout.rsvps && closeout.rsvps.length == 0" class="alert alert-warning">
No students for this class.
</div>
<table class="table table-condensed" ng-show="closeout.rsvps && closeout.rsvps.length > 0">
<thead>
<tr>
<th>Student Name</th>
<th class="centered">Paid?</th>
<th class="centered">Completed?</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="rsvp in closeout.rsvps">
<td>{{rsvp.FirstName}} {{rsvp.LastName}}</td>
<td class="centered"><input type="checkbox" ng-model="rsvp.Paid" disabled></td>
<td class="centered"><input type="checkbox" ng-model="rsvp.Completed"></td>
</tr>
</tbody>
</table>
<p>
<strong>If you are finished verifying the information above, you may proceed to Closeout this class or
Cancel (and return to the previous screen).</strong>
</p>
<div class="alert alert-info">
<h4>Note:</h4>
Only students who paid for and completed the class will receive a certificate and notification thereof.
</div>
</div>
<div ng-show="closeout.closingOut && !closeout.closedOut">
<div class="alert alert-info">
Please wait while the class is closed out...
</div>
</div>
<div ng-show="closeout.closedOut">
<p>The Class has been closed. Any students who attended, paid for and completed the class will be receiving a Thank You email with information on retreiving their certificate.</p>
</div>
</div>
<div class="modal-footer" ng-hide="!closeout.show">
<button type="button" class="btn btn-primary" ng-click="doCloseOut()" ng-disabled="!closeout.rsvps" ng-hide="closeout.closingOut || closeout.closedOut">Closeout</button>
<a href="" class="btn btn-warning" ng-click="cancelCloseOut()" ng-hide="closeout.closingOut || closeout.closedOut">Cancel</a>
<a href="" class="btn btn-primary" ng-click="ok('closedout')" ng-show="closeout.closedOut">OK</a>
</div>
</form>
</script>
<script type="text/javascript">
$('[data-toggle="popover"]').popover({ container: ".modal-body" });
$('#course').popover({ trigger: "hover" });
$('#venue').popover({ trigger: "hover" });
$('#date').popover({ trigger: "hover" });
$('#time').popover({ trigger: "hover" });
$('#cost').popover({ trigger: "hover" });
$('#comment').popover({ trigger: "hover" });
$('#instructor').popover({ trigger: "hover" });
</script>
答案 0 :(得分：0)
尝试将弹出框的容器设置为模态对话框。
//#modalDialog would be whatever the ID is for your modal dialog div.
$('[data-toggle="popover"]').popover({ container: "#modalDialog" });
编辑：我刚注意到你在#comment上做了你的，但是我没有看到任何标识为 comment的元素。
您的容器不必是ID modalDialog的div。在您的情况下，我尝试制作容器.modal-body，您应该获得所需的效果。此外，这仅适用于具有data-toggle属性的弹出窗口，您可以将其保留或将其更改为适用于所有弹出元素的选择器。