Allow users to type in textarea on page while viewing modal

Question

I have a editable div on my page, and when the users focuses on that div, I have a script that shows a bootstrap modal with a toolbar for advanced editing tools.

The problem is when the user focuses on the div and the modal appears it is disabling the ability to edit the text within the div. When you click on the div to edit it, the modal goes away.

I am needing the modal to stay open so the user can use the toolbar to edit the text in the div on the standard page.

The modal looks like what is below.

<!--Editor Toolbar -->
<div id="editorToolbar" class="modal container hide fade" tabindex="-1" data-backdrop="false">
   <div class="modal-body">
      <?php include '../core/editorBar.php'; ?>
   </div>
</div>

I have made this script to allow the modal to display when the div has focus, Now I just need to make it stay while you type in the div.

<script type="text/javascript">

  function showToolbar() 
  {
     $('#editorToolbar').modal('show');
  }

</script>

Any help and ideas would be really appreciated!

update

I added: data-backdrop="false" to the modal div, this removed the backdrop (grey overlay) from behind the modal, but when you click the div it still hides the modal again.

Answer 1

According the bootstrap docs, you will want to set the backdrop data option to "static". So either:

<div id="myModal" data-backdrop="static">...</div>

or:

$('#myModal').modal({
    backdrop: 'static'
});