Modal occupy full screen

Question

I have the following Modal and I want it to occupy the whole screen / or most of the screen:

<div class="modal fade" id="treinamentos" tabindex="-1" role="dialog" aria-labelledby="alterarLabel" style="z-index: 1100;" data-backdrop="static">
    <div class="modal-dialog" role="document">
       <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="exampleModalLabel"><label for="nmTreinamento" id="nmTreinamento"></label></h4>
           </div>
       <div class="modal-body">

       <object width="640" height="390" >
            <param name="movie" id="filme"></param>
            <param name="allowFullScreen" value="true">
            <param name="allowScriptAccess" value="always"></param>
            <embed id="meuid" type="application/x-shockwave-flash" fs=1
            allowfullscreen="true" allowscriptaccess="always"
            width="570" height="480" align="center"></embed>
      </object>
    </div>                
</div>

I’ve tried to force the width:100%, however the modal size is not changed.

Answer 1

Just change the class properties modal-dialog and modal-content, in this way:

.modal-dialog {
  width: 100%;
  height: 100%;
  padding: 0;
}

.modal-content {
  height: 100%;
  border-radius: 0;
}

Jsfiddle

More information: Modal Full Screen