如何使用引导程序或 jquery 在按钮单击时将局部视图显示为弹出窗口/模式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29589556/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display a partial view as a popup/modal on button click using bootstrap or jquery?
提问by labyrinth
I realize that this could be repetitive question but I failed to find an answer so putting a new question. I am pretty new to web development and trying to hard to get this trivial scenario work: I want to display some information to the user when he clicks on a button. The information should be presented like a popup: it would close only when user clicks on close(X) on top right or okbutton at bottom. I have tried implementing this using different ways I came across on various SO answers but nothing seems to work for me. Following code snippet that displays a static modal works:
我意识到这可能是重复的问题，但我没有找到答案，所以提出了一个新问题。我对 Web 开发非常陌生，并试图努力让这个微不足道的场景工作：我想在用户单击按钮时向他显示一些信息。信息应该像弹出窗口一样呈现：只有当用户点击X右上角的close( ) 或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">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</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 -->
But I am not able to convert things to display my partial view. How do I display a similar modal which actually encompasses a partial view?
但我无法转换内容以显示我的部分视图。如何显示实际上包含局部视图的类似模式？
采纳答案by Mackan
Your button reference a button to toggle showing/hiding of the modal, data-target="#myModal", but your modal didn't have an id.
您的按钮引用了一个按钮来切换模态的显示/隐藏data-target="#myModal"，但您的模态没有 id。
It's not clear if you want the whole modal to be a partial, or just the inner content. It doesn't matter at all though, since this is all applied server-side, and your modal is processed client-side.
目前尚不清楚您希望整个模态是部分内容还是只是内部内容。不过没关系，因为这都是在服务器端应用的，而您的模态是在客户端处理的。
Actually, bootstrap already have support for dynamically loading "partials" (using jQuery load in code behind):
实际上，bootstrap 已经支持动态加载“部分”（在后面的代码中使用 jQuery 加载）：
<button class="btn btn-primary" href="myFile.html" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
The above is a much simpler way than my example below..
上面的方法比我下面的例子简单得多。
Read more about jQuery load()or get()
阅读有关 jQuery load()或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">×</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>