如何將Ajax響應顯示為模式彈出窗口

Question

我有一個單擊鏈接，它正在發送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誰能幫助我該怎么做？

Answer 1

在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");

                    }
                }
            });

Answer 2

我通過創建模式，刪除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");
            }
        });
    });