 
     <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='modal-body teacher-edit-period-form'>
 

        {deleteButton if @isPeriodEmpty()}
      </div>



    </BS.Modal>

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


  getInitialState: ->
    warning: ''
    showModal: false

  close: ->
    @setState({showModal: false})

  open: ->
    @setState({showModal: true})

  performUpdate: ->
    if @isPeriodEmpty()
      # tab to be deleted cannot be activeTab unless first, so select previous or first
      @props.selectPreviousTab()
      id = @props.activeTab.id
      PeriodActions.delete(id, @props.courseId)
      @close()
    else
      @setState(warning: EMPTY_WARNING)

