如何使用引导程序或jQuery在单击按钮时将局部视图显示为弹出窗口/模式? [英] How to display a partial view as a popup/modal on button click using bootstrap or jquery?

问题描述

我意识到这可能是重复性的问题，但是我没有找到答案，因此提出了一个新问题.我是Web开发的新手，并努力尝试完成这一琐碎的工作:我想在用户单击按钮时向用户显示一些信息.信息应该像弹出窗口一样显示:仅当用户单击右上方的close(X)或底部的ok按钮时，该信息才会关闭.我已经尝试使用各种方式来实现此目标，而我在各种SO答案中都遇到了这种情况，但似乎没有任何效果.以下代码片段显示了静态模态作品:

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 ok button 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:

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

但是我无法转换内容以显示我的局部视图.如何显示实际上包含部分视图的相似模态?

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?

推荐答案

您的按钮引用了一个按钮，用于切换显示/隐藏模式data-target="#myModal"，但是您的模式没有ID.

Your button reference a button to toggle showing/hiding of the modal, data-target="#myModal", but your modal didn't have an 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.

实际上，引导程序已经支持动态加载部分"(在后面的代码中使用jQuery加载):

Actually, bootstrap already have support for dynamically loading "partials" (using jQuery load in code behind):

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

详细了解jQuery load()或

Read more about 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>

这篇关于如何使用引导程序或jQuery在单击按钮时将局部视图显示为弹出窗口/模式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！