使用angular2中的bootstrap模态,关闭模式将会抖动

时间:2017-06-06 11:16:23

标签: twitter-bootstrap angular bootstrap-modal

当我打开窗口时,页面更宽,我认为这是滚动条的问题,你能告诉我如何在angular2中解决吗?

这是一个清单:

<tbody>
    <tr *ngFor="let interview of interviews;" role="row" class="gradeA">
      <td class="col-sm-2" style="text-align: left;">{{ interview.company.name }}</td>
      <td class="col-sm-1" style="text-align: left;">{{ interview.inviter.real_name }}</td>
      <td class="col-sm-1" style="text-align: left;" *ngIf="interview.interviewee.user_id==0">未知</td>
      <td class="col-sm-1" style="text-align: left;" *ngIf="interview.interviewee.user_id!=0">{{ interview.interviewee.real_name }}</td>
      <td class="col-sm-1" style="text-align: left;" *ngIf="interview.notice_type==0">
        <a data-toggle="modal" data-target="#modal" (click)="showModal(interview)">短信</a>
      </td>
      <td class="col-sm-1" style="text-align: left;" *ngIf="interview.notice_type==1">
        <a data-toggle="modal" data-target="#modal" (click)="showModal(interview)">邮件</a>
      </td>
      <td class="col-sm-1" style="text-align: left;">{{ interview.interview_time }}</td>
      <td class="col-sm-1" style="text-align: left;" *ngIf="interview.status==0">发起面试</td>
      <td class="col-sm-1" style="text-align: left;" *ngIf="interview.status==1">确认面试时间</td>
      <td class="col-sm-1" style="text-align: left;" *ngIf="interview.status==2">面试完成</td>
      <td class="col-sm-1" style="text-align: left;" *ngIf="interview.status==3">面试者没有参加面试</td>
    </tr>
</tbody>

模态:

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">通知内容</h4>
      </div>
      <div class="modal-body" *ngIf="selectedInterview !== undefined">
        <span style="font-weight:bold;">公司名称:</span><p>{{ selectedInterview.company.name }}</p>
        <span style="font-weight:bold;">面试官:</span><p>{{ selectedInterview.inviter.real_name }}</p>
        <span style="font-weight:bold;">应聘者:</span><p>{{ selectedInterview.interviewee.real_name }}</p>
        <span style="font-weight:bold;">通知内容:</span><p>{{ selectedInterview.notice_content }}</p>
      </div>
    </div>
  </div>
</div>

showmodal方法:

selectedInterview: any;
showModal(interviewObj) {
this.selectedInterview = interviewObj;
}

1 个答案:

答案 0 :(得分:1)

这不是Angular问题,而是CSS问题。尝试给父div一些宽度。如果您可以共享代码,那么解决问题会更容易。