我意识到这可能是重复性的问题,但是我找不到答案,因此提出了一个新问题。我是Web开发的新手,并努力尝试完成这一琐碎的工作:我想在用户单击按钮时向用户显示一些信息。该信息应像弹出窗口一样显示:仅当用户单击X
右上方的close()或ok
底部的按钮时,该信息才会关闭。我尝试使用各种方式获得不同的答案来实现此目标,但似乎没有任何效果。以下显示静态模态的代码段:
<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 -->
但是我无法将其转换为显示我的局部视图。如何显示实际上包含部分视图的相似模态?
您的按钮引用了一个按钮,用于切换模式的显示/隐藏data-target="#myModal"
,但是您的模式没有ID。
尚不清楚您是否希望整个模态是部分内容,还是只是内部内容。没关系,因为这都是在服务器端应用的,而您的模式是在客户端处理的。
实际上,引导程序已经支持动态加载“部分”(在后面的代码中使用jQuery加载):
<button class="btn btn-primary" href="myFile.html" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
上面的方法比下面的示例要简单得多。
阅读有关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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句