如何在使用 bootstrap 或 jquery 单击按钮时将部分视图显示为 popup/modal？

Question

我意识到这可能是一个重复的问题，但我没有找到答案，所以提出了一个新问题。我对 Web 开发还很陌生，并且努力让这个微不足道的场景起作用：我想在用户单击按钮时向他显示一些信息。信息应该像弹出窗口一样显示：只有当用户单击右上角的关闭（X）或底部的 ok 按钮时，它才会关闭。我曾尝试使用我在各种 SO 答案中遇到的不同方式来实现这一点，但似乎对我没有任何作用。以下显示静态模式的代码片段有效：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<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 -->

但我无法转换内容以显示我的局部视图。如何显示实际上包含局部视图的类似模态？

Answer 1

您的按钮引用了一个按钮来切换 showing/hiding 模式，data-target="#myModal"，但您的模式没有 ID。

不清楚您是希望整个模态是部分内容，还是只是内部内容。不过没关系，因为这都是在服务器端应用的，而您的模态是在客户端处理的。

实际上，bootstrap已经支持动态加载"partials"（使用jQuery在代码后面加载）：

<button class="btn btn-primary" href="myFile.html" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>

上面的方法比我下面的例子要简单得多..

阅读更多关于 jQuery load() or get()

var myData = '<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>Load on request</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>' +
  '</div>';

//myData could be a file, with the same contents, and then you would use the ".load()" method below instead
$('#myModal').on('show.bs.modal', function(e) {
  //$('#myModal').load('myFile.cshtml'); //When loading from a file/url
  $('#myModal').html(myData); //loading from a string
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

<div class="modal" id="myModal">

</div>

如何在使用 bootstrap 或 jquery 单击按钮时将部分视图显示为 popup/modal？

How to display a partial view as a popup/modal on button click using bootstrap or jquery?

asp.net-mvc

jquery

modal-dialog

razor

twitter-bootstrap