How to get a bootstrap-wysihtml5-rails textarea (that uses bootstrap modals) working inside a modal?

Question

My coffeescript opens a bootstrap modal, and places a text area inside. The functionality of the bootstrap-wysihtml5-rails gem is then applied to the text box, and suddenly the user has a nice text editor to work with.

But here comes the problem. Apparently the wysihtml5 link insertion happens in a modal that with my implementation is opened from another modal. So I now have two open modals:

This causes problems, because now I can't activate the text field of the link modal, and I can't close the link modal. Also, the link modal is not fitting in the window.

Any idea how to fix this?

Here is my coffeescript:

$ ->

  editEmailText()

  $(document).ajaxSuccess (event, request, settings) ->
    editEmailText()
    if request.responseText.length isnt 2
      loadEditForm()


loadEditForm = ->

  console.log = ->

  text = $(".email-template-textarea")
  text.wysihtml5 events:

    blur: ->

    onChange = ->
      saveEmailText(text.val(), text.attr "id")

    editor.on "change", onChange

  editor.observe "load", ->
    editor.composer.element.addEventListener "keyup", ->
      saveEmailText(text.val(), text.attr "id")


saveEmailText = (value, email_template_id) ->

  # ...


editEmailText = ->

  editEmailTextBtn = $(".edit-btn")

  editEmailTextBtn.off "click"
  editEmailTextBtn.click (e) ->

    el = $(e.currentTarget)

    container = $("#jobs")
    container.children().remove()

    editBox = $("<textarea />").addClass("email-template-textarea")
    editBox.attr "placeholder", "Enter text ..."
    editBox.attr "style", "width: 99%; height: 100%"
    container.append(editBox)

    $("#Modal").modal().css "margin-left": ->
      -($(@).width() / 2)