我有一个点击它的链接发送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
任何人都可以帮助我如何做到这一点?
我通过创建模态和删除 $.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
的响应
代码为模态div
modal div
代码用于超链接
<div id="login_for_review" class="modal hide" role="dialog">
</div>
代码为ajax调用
<a th:if="${ratingSummary}" href="#" class="small dark account review_ratings_login">Login to write a review</a>