如何将Ajax响应显示为模式弹出窗口 [英] How to show Ajax response as modal popup

问题描述

我在单击时有一个链接，该链接正在发送 ajax 请求并成功获取响应，该请求是html文件，并且我要附加到 div 上，但是我需要显示一下 div 作为 modal popup ，我在下面尝试了一些方法.

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

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

输出文件

<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输出作为 modal pup ，而是得到了黑屏，有人可以帮助我该怎么做吗?

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

推荐答案

我通过创建模态并删除了 data-toggle 和 data-target 来解决了这个问题，将响应附加到该 modal div

I solved this problem by creating modal and by removing data-toggle and data-target and just appending response to that 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");
            }
        });
    });

这篇关于如何将Ajax响应显示为模式弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！