How to place items in Bootstrap modal's backdrop?

Question

I'm using regular Bootstrap 3 modals, but want to tweak them a little bit.

I want to place a logo on the upper left and the close button on the upper right of the backdrop, like this:

I've been playing around with some CSS pseudo selectors to insert content, but nothing of that worked. Maybe one of you guys has an idea.

Thanks in advance.

Answer 1

You can insert those elements on the normal HTML for modals and use the classnames pull-right and pull-left :

<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
   <img class="pull-left" src="YourLogo.png">
   <div class="pull-right">Close-Ico</div>
   <div class="modal-dialog">
      <div class="modal-content">
        ....

Check this example http://www.bootply.com/AQafF1LaVw

Answer 2

You could put a new hidden element in the body and only show it when the backdrop is shown. The .modal-open is only applied to the body tag when the modal is open.

.modal-open-inner {
    display:none;
}

.modal-open .modal-open-inner {
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
}

http://codeply.com/go/HdMsy0WdWS