覆盖模态形式MVC / C＃的宽度

Question

I've got a modal form that is being shared across the application, now I'd like to reuse the same definition for this particular modal but just to override the width. Is there any way of doing this?

<div id="modal-container" class="modal fade">
<div class="modal-dialog" style="width: 90%;"> -- this style attribute should change whenever gets called on a specific view
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h2 class="modal-title"></h2>
        </div>
        <div class="modal-body partialContainer" style="max-height: 600px;">
        </div>

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

Answer 1

Place your model definition in a partial view ( _MyModel.cshtml ) and replace the width from the dynamic ViewDate and call the partial view by passing the width.

Partial View Code:

<div id="modal-container" class="modal fade">
    <div class="modal-dialog" style='@ViewData["width"].ToString()'> -- this style attribute                  should change whenever gets called on a specific view
<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h2 class="modal-title"></h2>
    </div>
    <div class="modal-body partialContainer" style="max-height: 600px;">
    </div>

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

Call the above partial view from any view or partial view by passing the width as following

  @Html.Partial("_MyModel", new ViewDataDictionary { { "width", "500px" } })

We can also user Model or viewBag to pass data.

Answer 2

Add you own class in you model for which you want to change width

<div id="modal-container" class="modal fade customClass"> // added custom class
<div class="modal-dialog" style="width: 90%;"> -- this style attribute should change whenever gets called on a specific view
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h2 class="modal-title"></h2>
        </div>
        <div class="modal-body partialContainer" style="max-height: 600px;">
        </div>

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

Then add css for that class only

.customClass{
  width:400px; // custom width 
}