Fix backdrop on click issues

According to Twitter Bootstrap [documentation](http://getbootstrap.com/javascript/#modals-examples), `modal-backdrop` is suppose to be included into the container at the same level as `modal-dialog` which included as content from the `modal-bare-view`.

```html
<div id="myModal" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false">
    <div class="modal-backdrop fade in"></div>
    <div class="modal-dialog">...</div>
  </div>
``` 

To do so, I replaced `.before()` by `.preprend()` which will add `modal-backdrop` _inside_ the main modal object before `modal-dialog`.

Another issue is about the backdrop dismiss on click, when the `click` is triggered on `modal-backdrop`, jQuery returns this error:

```
Uncaught TypeError: undefined is not a function      jquery.js:4409 
jQuery.event.dispatch                                jquery.js:4409 
elemData.handle                                      jquery.js:4095 
```

I switched Marionette's `.listenTo()` by a regular jQuery `.click()` call. I don't khow if it's good practice, but it works. I don't know what's wrong with `.listenTo()`.

Everything works as it should be after those fixes, I have some issue with the `z-index`, but I think that is on my end.