[英]How to show Ajax response as modal popup
我有一个单击链接,它正在发送ajax
请求并成功获取响应,该链接是html文件,我将附加到div
,但是我需要将该div
显示为modal popup
然后尝试了以下操作。
在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>
在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");
}
});
});
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>
但我没有将此html output
作为modal pup
而是我得到了black screen
谁能帮助我该怎么做?
在Bootsrap模态弹出窗口中,您可以使用普通方式显示模态,而无需预先定义的模态div容器。 见模态
例如
$.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");
}
}
});
我通过创建模式,删除data-toggle
和data-target
并仅将响应附加到该modal div
来解决了这个问题
模态div代码
<div id="login_for_review" class="modal hide" role="dialog">
</div>
代码用于超链接
<a th:if="${ratingSummary}" href="#" class="small dark account review_ratings_login">Login to write a review</a>
代码用于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");
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.