How to show Ajax response as modal popup
<p>I have a link on clicking it is sending <code>ajax</code> request and getting response successfully which is html file and I am appending to a <code>div</code>, but I need to show that <code>div</code> as <code>modal popup</code> and I tried something below.</p>

<p>in <code>html</code> file</p>

<pre><code>&lt;a th:if="${ratingSummary}" href="#"  class="small dark account review_ratings_login"&gt;Login to write a review&lt;/a&gt; 

&lt;div id="login_for_review" data-toggle="modal" data-target="#reviewLoginModal"&gt;&lt;/div&gt;
</code></pre>

<p>in <code>js</code> file</p>

<pre><code>$(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");
            }
        });
    });
</code></pre>

<p><code>output</code> file</p>

<pre><code>&lt;div  class="centerForm modal fade" role="dialog" style="margin-left: 35%;" id="reviewLoginModal"&gt;

      &lt;div class="modal-dialog modal-sm" &gt;
       &lt;div class="modal-content"&gt;
          // here I have login form
    &lt;/div&gt;
  &lt;/div&gt;
</code></pre>

<p>but I am not getting this <code>html output</code> as <code>modal pup</code> instead I am getting <code>black screen</code> can anyone help me how to do this?</p>