html - changing the default width of bootstrap modal -

i trying change default width of dialog it's not working.i have tried solutions mentioned in this post. here html code below:

<style>  #mydialog .modal-dialog{  width:80%;  }   </style>   <div id="mydialog" class="modal fade" tabindex="-1" role="dialog">     <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"><i class="fa fa-times"></i></button>                 <div class="modal-title" id="dialog_title">text document</div>             </div>             <div class="modal-body">                  <div id="my_doc_content"></div>              </div>             <div class="modal-footer">                 <button type="button" class="btn btn-default" data-dismiss="modal" onclick="rg.closedialog('mydialog');">close</button>             </div>         </div>     </div> </div> 

here jsfiddle may you: http://jsfiddle.net/h3wdq/1603/

when css style added on class .modal instead of .modal-dialog, can change width of modal want following code:

.modal{     width: 80%; /* respsonsive width */     margin-left:-40%; /* width/2) */  } 

hope helps you!