I tried the following:
<div class="modal hide fade modal-admin" id="testModal" style="display: none;">
<div class="modal-header">
<a data-dismiss="modal" class="close">×</a>
<h3 id='dialog-heading'></h3>
</div>
<div class="modal-body">
<div id="dialog-data"></div>
</div>
<div class="modal-footer">
<a data-dismiss="modal" class="btn" >Close</a>
<a class="btn btn-primary" id="btnSaveChanges">Save changes</a>
</div>
</div>
And this Javascript:
$('.modal-admin').css('width', '750px');
$('.modal-admin').css('margin', '100px auto 100px auto');
$('.modal-admin').modal('show')
The result is not what I expected. The modal top left is positioned in the center of the screen.
Can anyone help me. Has anyone else tried this. I assume it's not an unusual thing to want to do.
Best Answer
UPDATE:
In
bootstrap 3
you need to change the modal-dialog. So in this case you can add the classmodal-admin
in the place wheremodal-dialog
stands.Original Answer (Bootstrap < 3)
Is there a certain reason you're trying to change it with JS/jQuery?
You can easily do it with just CSS, which means you don't have to do your styling in the document. In your own custom CSS file, you add:
In your case:
The reason I put body before the selector is so that it takes a higher priority than the default. This way you can add it to an custom CSS file, and without worries update Bootstrap.