 
     <BS.Modal
       {...@props}
-      title={title}
+      show={@state.showModal}
+      onHide={@close}
       className='teacher-edit-period-modal'>
+
+      <BS.Modal.Header closeButton>
+        <BS.Modal.Title>{title}</BS.Modal.Title>
+      </BS.Modal.Header>
 
       <div className={formClasses.join(' ')}>
         <RenamePeriodField

    </BS.Modal>

  render: ->
    <BS.OverlayTrigger
      ref='overlay'
      rootClose={true}
      trigger='click'
      overlay={@renderForm()}>
        <BS.Button bsStyle='link' className='edit-period'>
          <i className='fa fa-pencil' />
          Rename <CourseGroupingLabel courseId={@props.courseId}/>
        </BS.Button>
    </BS.OverlayTrigger>

    if not @state.invalid
      id = @props.activeTab.id
      PeriodActions.save(@props.courseId, id, period: {name: @state.period_name})
      @close()

  renderForm: ->
    formClasses = ['modal-body', 'teacher-edit-period-form']
