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');           
    });
});

行细节是部分视图中包含的模态的名称，而rowDetailBody是模态体。

这是我为获取数据所做的功能：

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

        return PartialView("ShowDialog", data);
    }

我返回名为showDialog的部分视图，该视图是从数据库中获取的数据。

这是我的patialView：

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

PLZ有人可以帮助我，并告诉我如何以模态而不是全屏打开窗口

Answer 1

您似乎错过了模态标记中的模态对话框和模态内容包装器。

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

弹出窗口模式在javascript

1 个答案: