Java 如何将 Ajax 响应显示为模态弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38007345/
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 show Ajax response as modal popup
提问by subbu royal
I have a link on clicking it is sending ajaxrequest and getting response successfully which is html file and I am appending to a div, but I need to show that divas modal popupand I tried something below.
我有点击它发送一个链接ajax请求，并成功获得响应是HTML文件，我追加到一个div，但我需要证明div的modal popup，我尝试下面的东西。
in htmlfile
在html文件中
<a th:if="${ratingSummary}" href="#" class="small dark account review_ratings_login">Login to write a review</a>
<div id="login_for_review" data-toggle="modal" data-target="#reviewLoginModal"></div>
in jsfile
在js文件中
$(document).on('click', '.review_ratings_login', function () {
var $data = $('#review_product_id span').text();
var url = '/mycompany/login/'+$data;
$.ajax({
type: 'GET',
url: url,
success: function (output) {
$('#login_for_review').html(output).modal('show');// I tried to show this response as modal popup
},
error: function(output){
alert("fail");
}
});
});
outputfile
output文件
<div class="centerForm modal fade" role="dialog" style="margin-left: 35%;" id="reviewLoginModal">
<div class="modal-dialog modal-sm" >
<div class="modal-content">
// here I have login form
</div>
</div>
but I am not getting this html outputas modal pupinstead I am getting black screencan anyone help me how to do this?
但我没有得到这个，html output因为modal pup我得到了black screen任何人都可以帮助我如何做到这一点？
采纳答案by subbu royal
I solved this problem by creating modal and by removing data-toggleand data-targetand just appending response to that modal div
我通过创建模式，并通过删除解决了这个问题data-toggle，并data-target与刚刚附加响应该 modal div
Code For modal div
模态div的代码
<div id="login_for_review" class="modal hide" role="dialog">
</div>
Code For hyperlink
超链接代码
<a th:if="${ratingSummary}" href="#" class="small dark account review_ratings_login">Login to write a review</a>
Code For ajax call
ajax调用代码
$(document).on('click', '.review_ratings_login', function () {
var $data = $('#review_product_id span').text();
var url = '/mycompany/login/'+$data;
$.ajax({
type: 'GET',
url: url,
success: function (output) {
$('#login_for_review').html(output).modal('show');//now its working
},
error: function(output){
alert("fail");
}
});
});
回答by Piyush Aghera
In Bootsrap modal popup, You can use plain way to show modal which don't need pre-defined modal div container . see at modal
在 Bootsrap 模态弹出窗口中，您可以使用简单的方式来显示不需要预定义模态 div 容器的模态。见模态
For E.g
例如
$.ajax({
url: "url",
type: 'POST',
dataType: "html",
data:{id:params},
success: function(data, status, xhr) {
if(data==""){
window.location.href="/";
}
else{
BootstrapDialog.show({
title: "Modal Tital",
message: function(dialogRef){
$mydata = $($.parseHTML(data));
return $mydata;
},
onshow: function(dialog){
// and css change if need, eg.
dialog.$modalHeader.css("float","none");
},
onshown:function(dialog)
{
// event after shown
},
onhide:function(dailog)
{
// event on hide
}
});
}
},
statusCode: {
401: function () {
alert("Your session has been expired");
}
}
});
