模态对话框部分偏离窗口的右侧

时间：2016-10-13 15:33:25

标签： jquery css asp.net-mvc twitter-bootstrap

我有一个模态对话框窗口，当用户点击动作链接时会显示该窗口。此对话框工作正常，但它显示在屏幕右侧。我可以调整屏幕大小，使窗口变小，然后此对话框正确居中并显示相应的字段。Below is the image off the screen.

enter image description here

该对话框的图像显示在中心，但我不得不修改我的窗口。 现在我的代码。

首先是我正在使用的js。

PREFIX     :  <http://example.org/ns#>
PREFIX  rdf:  <http://www.w3.org/1999/02/22-rdf-syntax-ns#>

SELECT  ?id 
        ?name 
        (count(?s) as ?count)
WHERE 
  {            ?s    rdf:type    ?type  
               FILTER ( ?type IN ( :Client, :Project, :Staff ) ) .
    OPTIONAL { ?s  :hasTag   ?t    .
               ?t  rdf:type  :Tag  ;
                   :hasId    ?id   ;
                   :hasName  ?name }
  } 
GROUP BY ?id ?name

}

接下来是我的看法。这是一个剃刀的观点。重要的是我相信的模态占位符。

$(function () {

    $.ajaxSetup({ cache: false });

    $("a[data-modal]").on("click", function (e) {

        // hide dropdown if any
        $(e.target).closest('.btn-group').children('.dropdown-toggle').dropdown('toggle');


        $('#myModalContent').load(this.href, function () {


            $('#myModal').modal({
                backdrop: 'static',
                keyboard: true
            }, 'show');

            bindForm(this);
        });

        return false;
    });
});

function bindForm(dialog) {
$('form', dialog).submit(function () {
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function (result) {
            if (result.success) {
                $('#myModal').modal('hide');
                //Refresh
                location.reload();
            } else {
                $('#myModalContent').html(result);
                bindForm();
            }
        }
    });
    return false;
});

然后，这是我在模态对话框中渲染的局部视图。

    @using CRADV.ViewModel
@model CRADV.ViewModel.PreTransmissionViewModel

@{
    var grid = new WebGrid(Model.PreTransmissionVariances, rowsPerPage: 11);
    var count = Model.PreTransmissionVariances.Count();
}

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js"></script>
<script src="~/Scripts/modal.js"></script>


<div>
    <span class="text-primary text-left"> @Html.Label("Record Count: ") </span>
    <span class="text-primary text-right"> @Html.Label(count.ToString()) </span>
</div>

    <!-- modal placeholder-->
<div id="myModal" class="modal fade in">
    <div class="modal-dialog">
        <div class="modal-content">
            <div id="myModalContent"></div>
        </div>
    </div>
</div>


@grid.GetHtml(tableStyle: "table table-striped table-bordered",
                headerStyle: "thead-default",
                columns: grid.Columns(
                    grid.Column("field_name", "Field Name", canSort: true),
                    grid.Column("previous_month", "Previous Month", canSort: true),
                    grid.Column("current_month", "Current Month", canSort: true),
                    grid.Column("variance", "Variance", canSort: true),
                    grid.Column("is_reviewed", "Is Reviewed", canSort: true, format: (item) => Html.CheckBox("is_reviewed", (bool)(item.is_reviewed == 1), new { @class = "disabled" })),
                    grid.Column("comment", "Comments", format: (item) =>
                        new HtmlString(
                            Html.ActionLink("Add", "AddComment", new CommentViewModel { previous_batch_id = item.previous_batch_id, current_batch_id = item.current_batch_id, field_name = item.field_name },
                                htmlAttributes: new { data_modal = "",id = "btnCreate", @class = "" }).ToString()
                                        + " | " +
                            Html.ActionLink("View", "ViewComment", new CommentViewModel { previous_batch_id = item.previous_batch_id, current_batch_id = item.current_batch_id, field_name = item.field_name },
                                htmlAttributes: new { data_modal = "", id = "btnCreate", @class = "" }).ToString()))))



<div class="form-horizontal col-md-10" id="footer_partial">
    <div class="form-group col-md-5">
        @Html.LabelFor(x => x.review_date, "Review Date",new { @class = "control-label" })
        @Html.TextBoxFor(x => x.review_date, htmlAttributes: new { disabled = "disabled", @class = "form-control" })
    </div>
    <div class="form-group col-md-5">
        @Html.LabelFor(x => x.reviewer, "Reviewer", new { @class = "control-label" })
        @Html.TextBoxFor(x => x.reviewer, htmlAttributes: new { disabled = "disabled", @class = "form-control" })
    </div>
    <div class="form-group col-md-5">
        @Html.LabelFor(x => x.is_reviewed, "Reviewed", new { @class = "control-label" })
        @Html.CheckBoxFor(x => x.is_reviewed, new { disabled = "disabled", @class = "form-control" })
    </div>
</div>

最后我的css。这当然是bootstrap.css文件。这是模态类。

@model CRADV.ViewModel.CommentViewModel

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h3 id="myModalLabl"> Add Comment to Field</h3>
</div>

@using (Html.BeginForm("AddComment", "ALS", FormMethod.Post, new { @class = "modal-form" }))
{
    @Html.ValidationSummary()

    <div class="modal-body form-horizontal col-md-10">
        <div class="form-group col-md-5">
            @Html.LabelFor(x => x.field_name, "Field Name",new { @class = "form-control" })
            @Html.TextBoxFor(x => x.field_name, new { @class = "form-control disabled" })
        </div>
        <div class="form-group col-md-5">
            @Html.LabelFor(x => x.comment, "Comment",new { @class = "form-control" })
            @Html.TextBoxFor(x => x.comment, new { @class = "form-control" })
            @Html.ValidationMessageFor(x => x.comment)
        </div>
        @Html.HiddenFor(x => x.previous_batch_id)
        @Html.HiddenFor(x => x.current_batch_id)
    </div>

    <div class="modal-footer">
        <button class="btn btn-primary" type="submit">Save</button>
    </div>
}

1 个答案:

答案 0 :(得分：1)

https://codepen.io/bootpen/pen/jbbaRa

HTML 

<div class="container demo">


<div class="text-center">
    <button type="button" class="btn btn-demo" data-toggle="modal" data-target="#myModal">
        Left Sidebar Modal
    </button>

    <button type="button" class="btn btn-demo" data-toggle="modal" data-target="#myModal2">
        Right Sidebar Modal
    </button>
</div>

<!-- Modal -->
<div class="modal left fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <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="myModalLabel">Left Sidebar</h4>
            </div>

            <div class="modal-body">
                <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </p>
            </div>

        </div><!-- modal-content -->
    </div><!-- modal-dialog -->
</div><!-- modal -->

<!-- Modal -->
<div class="modal right fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
    <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="myModalLabel2">Right Sidebar</h4>
            </div>

            <div class="modal-body">
                <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </p>
            </div>

        </div><!-- modal-content -->
    </div><!-- modal-dialog -->
</div><!-- modal -->


</div><!-- container -->

<footer class="demo-footer">
<a href="http://www.bootpen.com" target="_blank">Get more code snippets</a>
</footer>

css 

/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add "left" or "right" in modal parent div, after class="modal".
* Get free snippets on bootpen.com
*******************************/
.modal.left .modal-dialog,
.modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: 320px;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
        -ms-transform: translate3d(0%, 0, 0);
         -o-transform: translate3d(0%, 0, 0);
            transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content {
    height: 100%;
    overflow-y: auto;
}

.modal.left .modal-body,
.modal.right .modal-body {
    padding: 15px 15px 80px;
}

/*Left*/
.modal.left.fade .modal-dialog{
    left: -320px;
    -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
       -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
         -o-transition: opacity 0.3s linear, left 0.3s ease-out;
            transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.in .modal-dialog{
    left: 0;
}

/*Right*/
.modal.right.fade .modal-dialog {
    right: -320px;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
       -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
         -o-transition: opacity 0.3s linear, right 0.3s ease-out;
            transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
    right: 0;
}

/* ----- MODAL STYLE ----- */
.modal-content {
    border-radius: 0;
    border: none;
}

.modal-header {
    border-bottom-color: #EEEEEE;
    background-color: #FAFAFA;
}

/* ----- v CAN BE DELETED v ----- */
body {
 background-color: #78909C;
}

.demo {
   padding-top: 60px;
    padding-bottom: 110px;
}

.btn-demo {
    margin: 15px;
    padding: 10px 15px;
    border-radius: 0;
    font-size: 16px;
    background-color: #FFFFFF;
}

.btn-demo:focus {
    outline: 0;
}

.demo-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 15px;
    background-color: #212121;
    text-align: center;
}

.demo-footer > a {
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    color: #fff;
}
相关问题
最新问题