Wie kann ich die Standardbreite einer Twitter Bootstrap Modalbox ändern?

Question

Ich habe Folgendes versucht:

   <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>

Und dieses Javascript:

    $('.modal-admin').css('width', '750px');
    $('.modal-admin').css('margin', '100px auto 100px auto');
    $('.modal-admin').modal('show')

Das Ergebnis ist nicht das, was ich erwartet hatte. Das Modal oben links ist in der Mitte des Bildschirms positioniert.

Kann mir jemand helfen? Hat jemand anderes dies versucht. Ich nehme an, dass es nicht ungewöhnlich ist, so etwas zu tun.

Answer 1

Bootstrap 3.x.x

   <!-- Modal -->
<div class="modal fade" id="employeeBasicDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm employeeModal" role="document">

        <form>

        <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="myModalLabel">Modal Title</h4>
            </div>

            <div class="modal-body row">
                Modal Body...
            </div>

            <div class="modal-footer"> 
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

        </form>

    </div>
</div>

Beachten Sie, dass ich im zweiten Div die Klasse .employeeModal hinzugefügt habe. Dann gestalten Sie diese Klasse.

.employeeModal{
        width: 700px;
    }

Answer 2

Ich habe SCSS und das vollständig responsive Modal verwendet:

.modal-dialog.large {
    @media (min-width: $screen-sm-min) { width:500px; }
    @media (min-width: $screen-md-min) { width:700px; }
    @media (min-width: $screen-lg-min) { width:850px; }
}

Answer 3

you can use any prefix or postfix name for modal. but you need to make sure that's should use everywhere with same prefix/postfix name.    

body .modal-nk {
        /* new custom width */
        width: 560px;
        /* must be half of the width, minus scrollbar on the left (30px) */
        margin-left: -280px;
    }

ou

body .nk-modal {
            /* new custom width */
            width: 560px;
            /* must be half of the width, minus scrollbar on the left (30px) */
            margin-left: -280px;
        }

Answer 4

Im Folgenden finden Sie den Code für die Einstellung der modalen Pop-up-Breite und der linken Position auf dem Bildschirm durch Javascript.

$('#openModalPopupId').css({"width": "80%", "left": "30%"});

Answer 5

.Size(ModalSize.Large)

sample:
 using (var modal = Html.Bootstrap().Begin(new Modal().Id("modalProject_" + modelItem.id).Closeable().Size(ModalSize.Large)))
                {
}