弹出模式在javascript中全屏打开

Question

我有一个表，我正在尝试单击行按钮以打开一个模式，其中包含具有 rowId 的对象的详细信息。当我的按钮被按下时，我进入后面的代码并执行从数据库中搜索数据的查询，然后在 javascript 中我将数据发送到模态并打开它。该表被放置在它自己的局部视图中，这样我就可以在这里传递一个模型。我面临的问题是模态不是作为模态打开的，而是作为页面内的部分视图打开的。

这是我的javascript：

$(document).ready(function () {
    $('.btn').click(function () {    

        debugger;
        var url = $('#rowDetails').data('url');
        $('#rowDetailsBody').html(data);            
        $('#rowDetails').modal('toggle');
        $('#rowDetails').modal('show');           
    });
});

row detail 是包含在局部视图中的模态的名称，rowDetailBody 是 Modal-Body。

这是我获取数据的功能：

 public ActionResult ShowDialog(int id )
    {
        PSEntities _context = new PSEntities(true);
        var data = //some query here

        return PartialView("ShowDialog", data);
    }

我将从数据库中获取的数据返回到名为 showDialog 的局部视图。

这是我的全景视图：

 <div class="modal fade" draggable="true" id="rowDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">SMS @item.SmsMT.Id</h3>
        </div>
        <div class="modal-body" id="rowDetailsBody"> 

            <table style="width:100%;" class="table table table-hover table-striped  table-condensed export-table" border="0">
                <tr>
                    <td align="left">

                        <label>@ViewRes.SharedStrings.SmsID</label>
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.SmsMT.Id)
                    </td>
                </tr>                    
            </table>
        </div>
        <div class="modal-footer">
            <button class="btn btn-sm" type="button" data-dismiss="modal" aria-hidden="true">Close</button>

        </div>
    </div>

请有人帮助我并告诉我如何以模式而不是全屏方式打开窗口

Answer 1

看起来您在模态标记中遗漏了 modal-dialog 和 modal-content 包装器。

<div class="modal fade">
  <div class="modal-dialog">
    <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">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->